Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4bd7fdcf 1 parent 0a03363f

新增测试表格组件

Inline Side-by-side
Showing 6 changed files with 202 additions and 25 deletions
<!--
* @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',
width: '100vw',
toolbar: 'table', // 工具栏显示
width: $('.table-field-page').width() + 'px',
paste_data_images: false, //允许粘贴图像
min_height: 300,
// file_picker_callback: function (cb, value, meta) {
......
<!--
* @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">
<template #input>
<van-radio-group v-model="item.value" direction="horizontal">
<van-radio v-for="x in item.sub" :key="index" :name="x.key">{{ x.value }}</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field v-else v-model="item.value" :name="item.name" :label="item.label" :type="item.type"
:placeholder="item.placeholder" :rules="item.rules" :required="item.required" :autosize="item.autosize"
:row="item.row" />
<div v-if="HideShow" class="table-field-page">
<div class="label">
<span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
<span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
</div>
<div class="tinymce-box">
<TEditor ref="refEdit" ></TEditor>
<div @click="getValue">获取内容</div>
<div @click="setValue">设置内容</div>
</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>
......
<!--
* @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 {
......
......@@ -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;
}
})
}
......
<!--
* @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": "姓名",
......
<!--
* @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>
......