fix 表格控件操作逻辑完善

hookehuyr
Commit 57fe91859a6f42f852d5ed99a5b4073f69ab7b1a 57fe9185 1 parent 4bd7fdcf
Showing 4 changed files with 92 additions and 16 deletions
src/components/TEditor/index.vue
src/components/TableField/index.vue
src/hooks/useComponentType.js
src/views/index.vue
--- a/src/components/TEditor/index.vue
View file @57fe918
+++ b/src/components/TEditor/index.vue
View file @57fe918
 <!--
  * @Date: 2024-07-12 13:28:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-01 12:00:57
+ * @LastEditTime: 2024-08-01 15:48:02
  * @FilePath: /data-table/src/components/TEditor/index.vue
  * @Description: 文件描述
 -->
@@ -12,6 +12,7 @@
         v-model="myValue"
         :init="tinymceOptions"
         :id="tinymceId"
+        @blur="onBlur"
     ></editor>
   </div>
 </template>
@@ -53,7 +54,7 @@ import Editor from "@tinymce/tinymce-vue";
 // import "tinymce/plugins/fullscreen";
-const emits = defineEmits(["update:modelValue", "setHtml"]);
+const emits = defineEmits(["update:modelValue", "setHtml", "blur"]);
 //这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
 const props = defineProps({
   value: {
@@ -286,6 +287,11 @@ const handleGetContent = () => {
   return tinymce.activeEditor.getContent();
 };
+const onBlur = (e) => {
+  // console.warn(e);
+  emits("blur", handleGetContent());
+}
+
 defineExpose({
   handleSetContent,
   handleGetContent,
--- a/src/components/TableField/index.vue
View file @57fe918
+++ b/src/components/TableField/index.vue
View file @57fe918
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-01 13:17:05
+ * @LastEditTime: 2024-08-01 16:24:00
  * @FilePath: /data-table/src/components/TableField/index.vue
  * @Description: 文件描述
 -->
@@ -12,28 +12,37 @@
       <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
     <div class="tinymce-box">
-      <TEditor ref="refEdit" ></TEditor>
+      <TEditor ref="refEdit" @blur="onBlur" :readonly="item.component_props.readonly"></TEditor>
-      <div @click="getValue">获取内容</div>
-      <div @click="setValue">设置内容</div>
     </div>
-    <div>
+    <!-- <div @click="getValue">获取内容</div>
+    <div @click="setValue">设置内容</div> -->
+    <!-- <div>
       <div v-html="table_html" class="table-wrapper"></div>
       <div @click="setHtml">设置内容</div>
+    </div> -->
+    <div
+      v-if="show_empty"
+      class="van-field__error-message"
+      style="padding: 1rem"
+    >
+      表格不能为空
     </div>
   </div>
 </template>
 <script setup>
 import { useRoute } from "vue-router";
-import { showSuccessToast, showFailToast } from 'vant';
+import { showSuccessToast, showFailToast, showToast } from 'vant';
 // 初始化WX环境
 import wx from 'weixin-js-sdk'
+import $ from 'jquery'
 import TEditor from "@/components/TEditor/index.vue";
 const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
+const emit = defineEmits(["active"]);
 // 隐藏显示
 const HideShow = computed(() => {
@@ -46,7 +55,19 @@ const ReadonlyShow = computed(() => {
 });
 onMounted(() => {
-  props.item.value = props.item.component_props.default;
+  $('.tinymce-box').width($('.table-field-page').width() + 'px');
+  //
+  // table_html.value = props.item.component_props.default;
+  //
+  props.item.value = {
+    key: "table",
+    filed_name: props.item.key,
+    value: props.item.component_props.default,
+  };
+  emit("active", props.item.value);
+  setTimeout(() => {
+    refEdit.value.handleSetContent(props.item.component_props.default)
+  }, 1000);
 });
 const refEdit = ref(null);
@@ -61,8 +82,18 @@ const setValue = () => {
 }
 const table_html = ref('');
-const setHtml = () => {
+// const setHtml = () => {
-  table_html.value = table
+//   table_html.value = table
+// }
+
+const onBlur = (html) => {
+  props.item.value = {
+    key: "table",
+    filed_name: props.item.key,
+    value: html,
+  };
+  emit("active", props.item.value);
+  table_html.value = html;
 }
 const table = `
@@ -129,6 +160,24 @@ const table = `
   </tbody>
 </table>
 `
+const show_empty = ref(false);
+// 校验模块
+const validTableEditor = () => {
+  if (props.item.component_props.disabled) { // 通过规则隐藏的属性，不校验
+    show_empty.value = false;
+  } else {
+    // 必填项 未上传文件
+    if (props.item.component_props.required && !refEdit.value.handleGetContent()) {
+      show_empty.value = true;
+      showToast(props.item.component_props.label + "必填项未填写");
+    } else {
+      show_empty.value = false;
+    }
+  }
+  return !show_empty.value;
+};
+
+defineExpose({ validTableEditor });
 </script>
 <style lang="less" scoped>
@@ -142,6 +191,8 @@ const table = `
 .tinymce-box {
   // width: 100%;
+  display: block;
+  margin-top: 1rem;
 }
 :deep(.table-wrapper) {
--- a/src/hooks/useComponentType.js
View file @57fe918
+++ b/src/hooks/useComponentType.js
View file @57fe918
@@ -207,7 +207,7 @@ export function createComponentType(data) {
     if (item.component_props.tag === 'volunteer_group') {
       item.component = VolunteerGroupField;
     }
-    if (item.component_props.tag === 'table') {
+    if (item.component_props.tag === 'table_editor') {
       item.component = TableField;
     }
   })
--- a/src/views/index.vue
View file @57fe918
+++ b/src/views/index.vue
View file @57fe918
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-01 14:33:36
+ * @LastEditTime: 2024-08-01 16:33:00
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -282,6 +282,7 @@ const formatData = (data) => {
 const area_picker = ref([]);
 const image_uploader = ref([]);
 const file_uploader = ref([]);
+const table_editor = ref([]);
 const sign = ref([]);
 const rate_picker = ref([]);
 const appointment = ref([]);
@@ -294,6 +295,9 @@ const setRefMap = (el, item) => {
     if (item.component_props.tag === "file_uploader") {
       file_uploader.value.push(el);
     }
+    if (item.component_props.tag === "table_editor") {
+      table_editor.value.push(el);
+    }
     // if (item.component_props.tag === "sign") {
     //   sign.value.push(el);
     // }
@@ -582,12 +586,12 @@ onMounted(async () => {
   // TEST 新组件
   // page_form.push({
-  //     "tag": "table",
+  //     "tag": "table_editor",
   //     "name": "name_2",
   //     "index": 2,
-  //     "label": "姓名",
+  //     "label": "表格",
   //     "unique": false,
-  //     "default": "",
+  //     "default": "<p>123</p>",
   //     "disabled": false,
   //     "field_id": 799599,
   //     "readonly": false,
@@ -1007,6 +1011,9 @@ const onActive = (item) => {
   if (item?.type === "picker") { // 下拉框控件
     postData.value[item.key] = item.value;
   }
+  if (item?.key === "table_editor") { // 表单控件
+    postData.value[item.filed_name] = item.value;
+  }
   // 检查规则，会影响字段显示
   checkRules();
 };
@@ -1041,6 +1048,18 @@ const validOther = () => {
       }
     });
   }
+  if (table_editor.value) {
+    // 文件上传
+    table_editor.value.forEach((item, index) => {
+      if (table_editor.value[index].validTableEditor && !table_editor.value[index].validTableEditor()) {
+        valid = {
+          status: table_editor.value[index].validTableEditor(),
+          key: "table_editor",
+        };
+        return false;
+      }
+    });
+  }
   // if (sign.value) {
   //   // 电子签名
   //   sign.value.forEach((item, index) => {