✨ feat: 电子签名验证功能优化

 <!--
  * @Date: 2022-09-06 16:29:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-07 15:58:45
+ * @LastEditTime: 2022-09-07 16:50:16
  * @FilePath: /data-table/src/components/SignField/index.vue
  * @Description: 电子签名控件
 -->
 <template>
   <div class="sign-page">
-    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <div class="label">{{ item.label }}{{ valid }}<span v-if="item.required">&nbsp;*</span></div>
     <div style="padding: 1rem; position: relative;">
       <!-- <div style="padding: 1rem; position: relative; height: 150px; background-color: #FCFCFC;border: 1px solid #EAEAEA; border-radius: 5px;"> -->
       <vue-esign ref="esign" class="sign-wrapper" style="" :isCrop="isCrop" :lineWidth="lineWidth"
@@ -33,6 +33,7 @@
         <van-button type="danger" block @click="handleReset">删除签名</van-button>
       </div>
     </div>
+    <div v-if="show_empty" class="van-field__error-message" style="padding: 0 1rem 1rem 1rem;">电子签名不能为空</div>
   </div>
 </template>
 
@@ -54,12 +55,15 @@ const lineColor = ref('#000000')
 const bgColor = ref('#FCFCFC')
 const isCrop = ref(false)
 const show_control = ref(true)
+const image_url = ref('')
+const show_empty = ref(false)
 
 const handleReset = () => {
   // 清空画板
   esign.value.reset();
   show_control.value = true;
   // 删除可能存在的签名
+  image_url.value = ''
   props.item.value = { key: 'sign', value: '' };
   emit('active', props.item.value)
 }
@@ -87,7 +91,9 @@ const handleGenerate = () => {
         // 保存图片
         const { data } = await saveFileAPI({ filekey, hash, format: image_info.format, height: image_info.height, width: image_info.width });
         props.item.value = { key: 'sign', value: data.src};
+        image_url.value = data.src;
         show_control.value = false;
+        show_empty.value = false;
         emit('active', props.item.value)
       }
     }
@@ -117,16 +123,41 @@ const dataURLtoFile = (dataurl, filename) => {
 const show_sign = ref(true);
 const startSign = () => {
   show_sign.value = false;
+  show_empty.value = false;
 }
 const cancelSign = () => {
   show_sign.value = true;
+  show_empty.value = false;
   handleReset()
 }
+
+const validSign = () => {
+  // 必填项 未生成签名
+  if (props.item.required && !image_url.value) {
+    show_empty.value = true;
+  } else {
+    show_empty.value = false;
+  }
+  return !show_empty.value
+}
+
+defineExpose({ validSign });
 </script>
 
+<!-- <script>
+export default {
+  methods: {
+    validSign () {
+      console.warn(0);
+    }
+  }
+}
+</script> -->
+
+
 <style lang="less" scoped>
 .sign-page {
-  padding-bottom: 1rem;
+  // padding-bottom: 1rem;
   .label {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
@@ -156,5 +187,9 @@ const cancelSign = () => {
       transform: translate(-50%, -50%);
     }
   }
+
+  .control-sign {
+    padding-bottom: 1rem;
+  }
 }
 </style>

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-07 16:02:34
+ * @LastEditTime: 2022-09-07 16:47:28
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -11,7 +11,7 @@
   <div class="table-box">
     <van-form @submit="onSubmit">
       <van-cell-group>
-        <component v-for="(item, index) in mockData" :key="index" :is="item.component" :item="item" @active="onActive" />
+        <component :ref="item.component_props.name" v-for="(item, index) in mockData" :key="index" :is="item.component" :item="item" @active="onActive" />
       </van-cell-group>
       <div style="margin: 16px;">
         <van-button round block type="primary" native-type="submit">
@@ -35,17 +35,17 @@ onMounted(() => {
   table_cover.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
   table_title.value = '这是一个表单的描述'
   mockData.value = [
-  {
-    key: 'phone',
-    value: '',
-    label: '手机号',
-    placeholder: '请输入手机号',
-    component: '',
-    component_props: {
-      name: 'phone'
-    },
-    required: true,
-  },
+  // {
+  //   key: 'phone',
+  //   value: '',
+  //   label: '手机号',
+  //   placeholder: '请输入手机号',
+  //   component: '',
+  //   component_props: {
+  //     name: 'phone'
+  //   },
+  //   required: true,
+  // },
   {
     key: 'username',
     value: 'test',
@@ -147,6 +147,7 @@ onMounted(() => {
     component_props: {
       name: 'sign',
     },
+    required: true,
   },
   // {
   //   key: 'city',
@@ -186,18 +187,33 @@ onMounted(() => {
   createComponentType(mockData.value)
 })
 
+const sign = ref(null);
+
 const onSubmit = (values) => {
   // 合并自定义字段到提交表单字段
   postData.value = _.assign(postData.value, values);
-  console.warn(postData.value);
+  // console.warn(postData.value);
   // console.warn(mockData.value);
+  // 检查非表单输入项
+  if (validOther()) { // 通过验证
+    console.warn('通过验证');
+  } else {
+    console.warn('不通过验证');
+  }
 };
+
 const onActive = (item) => {
   // 返回自定义字段
   if (item.key === 'sign') {
     postData.value['sign'] = item.value
   }
 }
+
+const validOther = () => {
+  // 检查电子签名输入项
+  const flag = sign.value[0].validSign();
+  return flag;
+}
 </script>
 
 <style lang="less" scoped>