✨ feat: 电子签名功能完善

hookehuyr
Commit eb4ca3a517156258f28a5735ec4798ebab37229c eb4ca3a5 1 parent 57cde0ab
Showing 2 changed files with 129 additions and 64 deletions
src/components/SignField/index.vue
src/views/index.vue
--- a/src/components/SignField/index.vue
View file @eb4ca3a
+++ b/src/components/SignField/index.vue
View file @eb4ca3a
 <!--
  * @Date: 2022-09-06 16:29:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-07 00:46:48
+ * @LastEditTime: 2022-09-07 15:58:45
  * @FilePath: /data-table/src/components/SignField/index.vue
- * @Description: 文件描述
+ * @Description: 电子签名控件
 -->
 <template>
   <div class="sign-page">
     <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
-    <div style="padding: 1rem;">
+    <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" style="border: 1px dashed #c2c1c1;" :height="700" :isCrop="isCrop" :lineWidth="lineWidth"
+      <vue-esign ref="esign" class="sign-wrapper" style="" :isCrop="isCrop" :lineWidth="lineWidth"
         :lineColor="lineColor" :bgColor.sync="bgColor" />
+      <div v-if="show_sign" class="whiteboard">
+        <div class="text" @click="startSign">
+          <van-icon name="edit" />&nbsp;点击开始签署电子签名
+        </div>
+      </div>
+    </div>
+    <div v-if="!show_sign">
+      <div v-if="show_control" class="control-sign">
+        <van-row gutter="20" style="padding: 0 1rem;">
+          <van-col :span="12">
+            <van-button type="default" block @click="handleGenerate">确认签名</van-button>
+          </van-col>
+          <van-col :span="12">
+            <van-button type="default" block @click="cancelSign">取消签名</van-button>
+          </van-col>
+        </van-row>
+      </div>
+      <div v-else style="padding: 0 1rem;">
+        <van-button type="danger" block @click="handleReset">删除签名</van-button>
       </div>
-    <div class="control-sign">
-      <button @click="handleReset">清空画板</button>
-      <button @click="handleGenerate">生成图片</button>
     </div>
   </div>
 </template>
 <script setup>
+import { v4 as uuidv4 } from 'uuid';
+import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
+import { showSuccessToast, showFailToast } from 'vant';
+
 const props = defineProps({
   item: Object
 });
-</script>
-<script>
+const emit = defineEmits(['active']);
-import { v4 as uuidv4 } from 'uuid';
-import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
-export default {
+const esign = ref(null);
-  data() {
+
-    return {
+const lineWidth = ref(6)
-      lineWidth: 6,
+const lineColor = ref('#000000')
-      lineColor: "#000000",
+const bgColor = ref('#FCFCFC')
-      bgColor: "",
+const isCrop = ref(false)
-      resultImg: "",
+const show_control = ref(true)
-      isCrop: false,
+
-    }
+const handleReset = () => {
-  },
+  // 清空画板
-  methods: {
+  esign.value.reset();
-    //清空画板..
+  show_control.value = true;
-    handleReset() {
+  // 删除可能存在的签名
-      this.$refs.esign.reset();
+  props.item.value = { key: 'sign', value: '' };
-      this.resultImg = "";
+  emit('active', props.item.value)
-    },
+}
-    //生成签名图片..
+
-    handleGenerate () {
+const handleGenerate = () => {
-      this.$refs.esign.generate()
+  esign.value.generate()
   .then(async res => {
     // let fileName = "img1.png";
     // let file = this.dataURLtoFile(res, fileName);
@@ -69,13 +86,23 @@ export default {
       if (filekey) {
         // 保存图片
         const { data } = await saveFileAPI({ filekey, hash, format: image_info.format, height: image_info.height, width: image_info.width });
-              console.warn(data.src);
+        props.item.value = { key: 'sign', value: data.src};
+        show_control.value = false;
+        emit('active', props.item.value)
       }
     }
-        });
+  })
-    },
+  .catch(err => {
-    //将图片base64转换为文件
+    // 签名生成失败
-    dataURLtoFile(dataurl, filename) {
+    console.warn(err);
+    if (err) {
+      showFailToast('签名生成失败');
+    }
+  })
+}
+
+//将图片base64转换为文件
+const dataURLtoFile = (dataurl, filename) => {
   var arr = dataurl.split(","),
     mime = arr[0].match(/:(.*?);/)[1],
     bstr = atob(arr[1]),
@@ -85,13 +112,21 @@ export default {
     u8arr[n] = bstr.charCodeAt(n);
   }
   return new File([u8arr], filename, { type: mime });
-    }
+}
-  }
+
+const show_sign = ref(true);
+const startSign = () => {
+  show_sign.value = false;
+}
+const cancelSign = () => {
+  show_sign.value = true;
+  handleReset()
 }
 </script>
 <style lang="less" scoped>
 .sign-page {
+  padding-bottom: 1rem;
   .label {
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
@@ -101,5 +136,25 @@ export default {
       color: red;
     }
   }
+  .sign-wrapper {
+    border: 1px solid #EAEAEA;
+    border-radius: 5px;
+  }
+  .whiteboard {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    .text {
+      position: absolute;
+      width: 100%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
 }
 </style>
--- a/src/views/index.vue
View file @eb4ca3a
+++ b/src/views/index.vue
View file @eb4ca3a
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-07 14:12:37
+ * @LastEditTime: 2022-09-07 16:02:34
  * @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" />
+        <component 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">
@@ -24,37 +24,39 @@
 <script setup>
 import { createComponentType } from '@/hooks/useComponentType'
+import _ from 'lodash'
 const table_cover = ref('');
 const table_title = ref('');
 const mockData = ref([]);
+const postData = ref({})
 onMounted(() => {
   table_cover.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
   table_title.value = '这是一个表单的描述'
   mockData.value = [
-  // {
+  {
-  //   key: 'phone',
+    key: 'phone',
-  //   value: '',
+    value: '',
-  //   label: '手机号',
+    label: '手机号',
-  //   placeholder: '请输入手机号',
+    placeholder: '请输入手机号',
-  //   component: '',
+    component: '',
-  //   component_props: {
+    component_props: {
-  //     name: 'phone'
+      name: 'phone'
-  //   },
+    },
-  //   required: true,
+    required: true,
-  // },
+  },
-  // {
+  {
-  //   key: 'username',
+    key: 'username',
-  //   value: 'test',
+    value: 'test',
-  //   label: '用户名',
+    label: '用户名',
-  //   placeholder: '请输入用户名',
+    placeholder: '请输入用户名',
-  //   component: '',
+    component: '',
-  //   component_props: {
+    component_props: {
-  //     name: 'text'
+      name: 'text'
-  //   },
+    },
-  //   required: true,
+    required: true,
-  // },
+  },
   // {
   //   key: 'email',
   //   value: '',
@@ -143,7 +145,7 @@ onMounted(() => {
     placeholder: '',
     component: '',
     component_props: {
-      name: 'sign'
+      name: 'sign',
     },
   },
   // {
@@ -185,9 +187,17 @@ onMounted(() => {
 })
 const onSubmit = (values) => {
-  console.log('submit', values);
+  // 合并自定义字段到提交表单字段
+  postData.value = _.assign(postData.value, values);
+  console.warn(postData.value);
   // console.warn(mockData.value);
 };
+const onActive = (item) => {
+  // 返回自定义字段
+  if (item.key === 'sign') {
+    postData.value['sign'] = item.value
+  }
+}
 </script>
 <style lang="less" scoped>