Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c5c67b67 1 parent e1c91b01

数据结构适配调整

Inline Side-by-side
Showing 7 changed files with 265 additions and 153 deletions
...@@ -7,39 +7,58 @@ ...@@ -7,39 +7,58 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="calendar-page"> 9 <div class="calendar-page">
10 - <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required" 11 + {{ item.component_props.label
12 - :placeholder="item.placeholder" :rules="item.rules" @click="show = true" /> 12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 - <van-calendar v-model:show="show" 13 + </div>
14 - :type="item.component_props.type" :max-range="item.component_props.maxRange" 14 + <van-field
15 - :min-date="item.component_props.minDate" :max-date="item.component_props.maxDate" 15 + v-model="item.value"
16 + is-link
17 + readonly
18 + :name="item.key"
19 + :required="item.component_props.required"
20 + :placeholder="item.component_props.placeholder"
21 + :rules="item.rules"
22 + @click="show = true"
23 + />
24 + <van-calendar
25 + v-model:show="show"
26 + :type="item.component_props.type"
27 + :max-range="item.component_props.max_range"
28 + :min-date="item.component_props.min_date"
29 + :max-date="item.component_props.max_date"
16 :formatter="formatter" 30 :formatter="formatter"
17 first-day-of-week="1" 31 first-day-of-week="1"
18 @month-show="onMonthShow" 32 @month-show="onMonthShow"
19 - @confirm="onConfirm" allow-same-day /> 33 + @confirm="onConfirm"
34 + allow-same-day
35 + />
20 </div> 36 </div>
21 </template> 37 </template>
22 38
23 <script setup> 39 <script setup>
24 const props = defineProps({ 40 const props = defineProps({
25 - item: Object 41 + item: Object,
26 -}) 42 +});
27 43
28 const show = ref(false); 44 const show = ref(false);
29 45
30 -const formatDate = (date) => `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; 46 +const formatDate = (date) =>
47 + `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
31 const onConfirm = (value) => { 48 const onConfirm = (value) => {
32 console.warn(props.item.component_props.type); 49 console.warn(props.item.component_props.type);
33 show.value = false; 50 show.value = false;
34 - if (props.item.component_props.type === 'range') { // 日期区间 51 + if (props.item.component_props.type === "range") {
52 + // 日期区间
35 const [start, end] = value; 53 const [start, end] = value;
36 props.item.value = `${formatDate(start)} ~ ${formatDate(end)}`; 54 props.item.value = `${formatDate(start)} ~ ${formatDate(end)}`;
37 - } else if (props.item.component_props.type === 'multiple') { // 多个日期 55 + } else if (props.item.component_props.type === "multiple") {
38 - const arr = [] 56 + // 多个日期
39 - value.forEach(element => { 57 + const arr = [];
40 - arr.push(formatDate(element)) 58 + value.forEach((element) => {
59 + arr.push(formatDate(element));
41 }); 60 });
42 - props.item.value = arr.join(','); 61 + props.item.value = arr.join(",");
43 } else { 62 } else {
44 props.item.value = formatDate(value); 63 props.item.value = formatDate(value);
45 } 64 }
...@@ -53,25 +72,25 @@ const formatter = (day) => { ...@@ -53,25 +72,25 @@ const formatter = (day) => {
53 72
54 if (month === 5) { 73 if (month === 5) {
55 if (date === 1) { 74 if (date === 1) {
56 - day.topInfo = '劳动节'; 75 + day.topInfo = "劳动节";
57 } else if (date === 4) { 76 } else if (date === 4) {
58 - day.topInfo = '青年节'; 77 + day.topInfo = "青年节";
59 } else if (date === 11) { 78 } else if (date === 11) {
60 - day.text = '今天'; 79 + day.text = "今天";
61 } 80 }
62 } 81 }
63 82
64 if (month === 10) { 83 if (month === 10) {
65 if (date === 1) { 84 if (date === 1) {
66 - day.topInfo = '国庆节'; 85 + day.topInfo = "国庆节";
67 - day.type = 'disabled' 86 + day.type = "disabled";
68 } 87 }
69 } 88 }
70 89
71 - if (day.type === 'start') { 90 + if (day.type === "start") {
72 - day.bottomInfo = '开始'; 91 + day.bottomInfo = "开始";
73 - } else if (day.type === 'end') { 92 + } else if (day.type === "end") {
74 - day.bottomInfo = '结束'; 93 + day.bottomInfo = "结束";
75 } 94 }
76 95
77 return day; 96 return day;
...@@ -80,10 +99,9 @@ const formatter = (day) => { ...@@ -80,10 +99,9 @@ const formatter = (day) => {
80 const onMonthShow = ({ date, title }) => { 99 const onMonthShow = ({ date, title }) => {
81 // console.warn(date); 100 // console.warn(date);
82 // console.warn(title); 101 // console.warn(title);
83 - if (title === '2022年12月') { 102 + if (title === "2022年12月") {
84 } 103 }
85 -} 104 +};
86 -
87 </script> 105 </script>
88 106
89 <style lang="less" scoped> 107 <style lang="less" scoped>
......
...@@ -7,35 +7,52 @@ ...@@ -7,35 +7,52 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="date-picker-field"> 9 <div class="date-picker-field">
10 - <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required" 11 + {{ item.component_props.label
12 - :placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" /> 12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 + </div>
14 + <van-field
15 + v-model="item.value"
16 + is-link
17 + readonly
18 + :name="item.key"
19 + :required="item.component_props.required"
20 + :placeholder="item.component_props.placeholder"
21 + :rules="item.rules"
22 + @click="showPicker = true"
23 + />
13 <van-popup v-model:show="showPicker" position="bottom"> 24 <van-popup v-model:show="showPicker" position="bottom">
14 - <van-date-picker v-model="currentDate" :title="item.component_props.title" 25 + <van-date-picker
15 - :min-date="item.component_props.min_date" :max-date="item.component_props.max_date" 26 + v-model="currentDate"
16 - :columns-type="item.component_props.columns_type" @confirm="onConfirm" @cancel="showPicker = false" /> 27 + :title="item.component_props.title"
28 + :min-date="item.component_props.min_date"
29 + :max-date="item.component_props.max_date"
30 + :columns-type="item.component_props.columns_type"
31 + @confirm="onConfirm"
32 + @cancel="showPicker = false"
33 + />
17 </van-popup> 34 </van-popup>
18 </div> 35 </div>
19 </template> 36 </template>
20 37
21 <script setup> 38 <script setup>
22 -import dayjs from 'dayjs'; 39 +import dayjs from "dayjs";
23 40
24 const props = defineProps({ 41 const props = defineProps({
25 - item: Object 42 + item: Object,
26 -}) 43 +});
27 44
28 const showPicker = ref(false); 45 const showPicker = ref(false);
29 const currentDate = ref([]); 46 const currentDate = ref([]);
30 47
31 const onConfirm = ({ selectedValues, selectedOptions }) => { 48 const onConfirm = ({ selectedValues, selectedOptions }) => {
32 - props.item.value = selectedValues[0] + '-' + selectedValues[1]; 49 + props.item.value = selectedValues[0] + "-" + selectedValues[1];
33 showPicker.value = false; 50 showPicker.value = false;
34 }; 51 };
35 52
36 onMounted(() => { 53 onMounted(() => {
37 - currentDate.value = props.item.value.split('-') 54 + currentDate.value = props.item.value.split("-");
38 -}) 55 +});
39 </script> 56 </script>
40 57
41 <style lang="less" scoped> 58 <style lang="less" scoped>
......
...@@ -7,13 +7,31 @@ ...@@ -7,13 +7,31 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="datetime-picker"> 9 <div class="datetime-picker">
10 - <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required" 11 + {{ item.component_props.label }}
12 - :placeholder="item.component_props.placeholder" :rules="item.rules" @click="showPicker = true" /> 12 + <span v-if="item.component_props.required">&nbsp;*</span>
13 + </div>
14 + <van-field
15 + v-model="item.value"
16 + is-link
17 + readonly
18 + :name="item.key"
19 + :required="item.component_props.required"
20 + :placeholder="item.component_props.placeholder"
21 + :rules="item.rules"
22 + @click="showPicker = true"
23 + />
13 <van-popup v-model:show="showPicker" position="bottom"> 24 <van-popup v-model:show="showPicker" position="bottom">
14 - <van-picker-group :title="item.component_props.title" :tabs="['选择日期', '选择时间']" @confirm="onConfirm" 25 + <van-picker-group
15 - @cancel="onCancel"> 26 + :title="item.component_props.title"
16 - <van-date-picker v-model="currentDate" :min-date="item.component_props.minDate" /> 27 + :tabs="['选择日期', '选择时间']"
28 + @confirm="onConfirm"
29 + @cancel="onCancel"
30 + >
31 + <van-date-picker
32 + v-model="currentDate"
33 + :min-date="item.component_props.min_date"
34 + />
17 <van-time-picker v-model="currentTime" /> 35 <van-time-picker v-model="currentTime" />
18 </van-picker-group> 36 </van-picker-group>
19 </van-popup> 37 </van-popup>
...@@ -21,19 +39,19 @@ ...@@ -21,19 +39,19 @@
21 </template> 39 </template>
22 40
23 <script setup> 41 <script setup>
24 -import { showToast } from 'vant'; 42 +import { showToast } from "vant";
25 -import dayjs from 'dayjs'; 43 +import dayjs from "dayjs";
26 44
27 const props = defineProps({ 45 const props = defineProps({
28 - item: Object 46 + item: Object,
29 -}) 47 +});
30 const showPicker = ref(false); 48 const showPicker = ref(false);
31 49
32 const currentDate = ref([]); 50 const currentDate = ref([]);
33 const currentTime = ref([]); 51 const currentTime = ref([]);
34 52
35 const onConfirm = () => { 53 const onConfirm = () => {
36 - props.item.value = `${currentDate.value.join('-')} ${currentTime.value.join(':')}`; 54 + props.item.value = `${currentDate.value.join("-")} ${currentTime.value.join(":")}`;
37 showPicker.value = false; 55 showPicker.value = false;
38 }; 56 };
39 const onCancel = () => { 57 const onCancel = () => {
...@@ -42,22 +60,22 @@ const onCancel = () => { ...@@ -42,22 +60,22 @@ const onCancel = () => {
42 60
43 onMounted(() => { 61 onMounted(() => {
44 // 获取值定位显示 62 // 获取值定位显示
45 - const datetime = props.item.value.split(' '); 63 + const datetime = props.item.value.split(" ");
46 - currentDate.value = datetime[0]?.split('-'); 64 + currentDate.value = datetime[0]?.split("-");
47 - currentTime.value = datetime[1]?.split(':'); 65 + currentTime.value = datetime[1]?.split(":");
48 -}) 66 +});
49 </script> 67 </script>
50 68
51 <style lang="less" scoped> 69 <style lang="less" scoped>
52 .datetime-picker { 70 .datetime-picker {
53 -.label { 71 + .label {
54 - padding: 1rem 1rem 0 1rem; 72 + padding: 1rem 1rem 0 1rem;
55 - font-size: 0.9rem; 73 + font-size: 0.9rem;
56 - font-weight: bold; 74 + font-weight: bold;
57 75
58 - span { 76 + span {
59 - color: red; 77 + color: red;
78 + }
60 } 79 }
61 } 80 }
62 -}
63 </style> 81 </style>
......
...@@ -7,28 +7,42 @@ ...@@ -7,28 +7,42 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="rate-field"> 9 <div class="rate-field">
10 - <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-rate v-model="rate_value" :count="item.component_props.count" @change="onChange" style="padding: 1rem;" /> 11 + {{ item.component_props.label
12 - <div v-if="show_empty" class="van-field__error-message" style="padding: 0 1rem 1rem 1rem;">评分不能为空</div> 12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 + </div>
14 + <van-rate
15 + v-model="rate_value"
16 + :count="item.component_props.count"
17 + @change="onChange"
18 + style="padding: 1rem"
19 + />
20 + <div
21 + v-if="show_empty"
22 + class="van-field__error-message"
23 + style="padding: 0 1rem 1rem 1rem"
24 + >
25 + 评分不能为空
26 + </div>
13 </div> 27 </div>
14 </template> 28 </template>
15 29
16 <script setup> 30 <script setup>
17 const props = defineProps({ 31 const props = defineProps({
18 - item: Object 32 + item: Object,
19 }); 33 });
20 -const emit = defineEmits(['active']); 34 +const emit = defineEmits(["active"]);
21 const show_empty = ref(false); 35 const show_empty = ref(false);
22 const rate_value = ref(0); 36 const rate_value = ref(0);
23 37
24 const onChange = () => { 38 const onChange = () => {
25 - props.item.value = { key: 'rate', value: rate_value.value }; 39 + props.item.value = { key: props.item.key, value: rate_value.value, type: "rate" };
26 - emit('active', props.item.value); 40 + emit("active", props.item.value);
27 -} 41 +};
28 42
29 onMounted(() => { 43 onMounted(() => {
30 - props.item.value = { key: 'rate', value: rate_value.value }; 44 + props.item.value = { key: props.item.key, value: rate_value.value, type: "rate" };
31 - emit('active', props.item.value); 45 + emit("active", props.item.value);
32 }); 46 });
33 47
34 const validRate = () => { 48 const validRate = () => {
...@@ -38,8 +52,8 @@ const validRate = () => { ...@@ -38,8 +52,8 @@ const validRate = () => {
38 } else { 52 } else {
39 show_empty.value = false; 53 show_empty.value = false;
40 } 54 }
41 - return !show_empty.value 55 + return !show_empty.value;
42 -} 56 +};
43 57
44 defineExpose({ validRate }); 58 defineExpose({ validRate });
45 </script> 59 </script>
......
...@@ -7,11 +7,21 @@ ...@@ -7,11 +7,21 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="sign-page"> 9 <div class="sign-page">
10 - <div class="label">{{ item.label }}{{ valid }}<span v-if="item.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <div style="padding: 1rem; position: relative;"> 11 + {{ item.component_props.label }}{{ valid
12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 + </div>
14 + <div style="padding: 1rem; position: relative">
12 <!-- <div style="padding: 1rem; position: relative; height: 150px; background-color: #FCFCFC;border: 1px solid #EAEAEA; border-radius: 5px;"> --> 15 <!-- <div style="padding: 1rem; position: relative; height: 150px; background-color: #FCFCFC;border: 1px solid #EAEAEA; border-radius: 5px;"> -->
13 - <vue-esign ref="esign" class="sign-wrapper" style="" :isCrop="isCrop" :lineWidth="lineWidth" 16 + <vue-esign
14 - :lineColor="lineColor" :bgColor.sync="bgColor" /> 17 + ref="esign"
18 + class="sign-wrapper"
19 + style=""
20 + :isCrop="isCrop"
21 + :lineWidth="lineWidth"
22 + :lineColor="lineColor"
23 + :bgColor.sync="bgColor"
24 + />
15 <div v-if="show_sign" class="whiteboard"> 25 <div v-if="show_sign" class="whiteboard">
16 <div class="text" @click="startSign"> 26 <div class="text" @click="startSign">
17 <van-icon name="edit" />&nbsp;点击开始签署电子签名 27 <van-icon name="edit" />&nbsp;点击开始签署电子签名
...@@ -20,7 +30,7 @@ ...@@ -20,7 +30,7 @@
20 </div> 30 </div>
21 <div v-if="!show_sign"> 31 <div v-if="!show_sign">
22 <div v-if="show_control" class="control-sign"> 32 <div v-if="show_control" class="control-sign">
23 - <van-row gutter="20" style="padding: 0 1rem;"> 33 + <van-row gutter="20" style="padding: 0 1rem">
24 <van-col :span="12"> 34 <van-col :span="12">
25 <van-button type="default" block @click="handleGenerate">确认签名</van-button> 35 <van-button type="default" block @click="handleGenerate">确认签名</van-button>
26 </van-col> 36 </van-col>
...@@ -29,83 +39,103 @@ ...@@ -29,83 +39,103 @@
29 </van-col> 39 </van-col>
30 </van-row> 40 </van-row>
31 </div> 41 </div>
32 - <div v-else style="padding: 0 1rem;"> 42 + <div v-else style="padding: 0 1rem">
33 <van-button type="danger" block @click="handleReset">删除签名</van-button> 43 <van-button type="danger" block @click="handleReset">删除签名</van-button>
34 </div> 44 </div>
35 </div> 45 </div>
36 - <div v-if="show_empty" class="van-field__error-message" style="padding: 0 1rem 1rem 1rem;">电子签名不能为空</div> 46 + <div
47 + v-if="show_empty"
48 + class="van-field__error-message"
49 + style="padding: 0 1rem 1rem 1rem"
50 + >
51 + 电子签名不能为空
52 + </div>
37 </div> 53 </div>
38 </template> 54 </template>
39 55
40 <script setup> 56 <script setup>
41 -import { v4 as uuidv4 } from 'uuid'; 57 +import { v4 as uuidv4 } from "uuid";
42 -import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common' 58 +import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
43 -import { showSuccessToast, showFailToast } from 'vant'; 59 +import { showSuccessToast, showFailToast } from "vant";
44 60
45 const props = defineProps({ 61 const props = defineProps({
46 - item: Object 62 + item: Object,
47 }); 63 });
48 64
49 -const emit = defineEmits(['active']); 65 +const emit = defineEmits(["active"]);
50 66
51 const esign = ref(null); 67 const esign = ref(null);
52 68
53 -const lineWidth = ref(6) 69 +const lineWidth = ref(6);
54 -const lineColor = ref('#000000') 70 +const lineColor = ref("#000000");
55 -const bgColor = ref('#FCFCFC') 71 +const bgColor = ref("#FCFCFC");
56 -const isCrop = ref(false) 72 +const isCrop = ref(false);
57 -const show_control = ref(true) 73 +const show_control = ref(true);
58 -const image_url = ref('') 74 +const image_url = ref("");
59 -const show_empty = ref(false) 75 +const show_empty = ref(false);
60 76
61 const handleReset = () => { 77 const handleReset = () => {
62 // 清空画板 78 // 清空画板
63 esign.value.reset(); 79 esign.value.reset();
64 show_control.value = true; 80 show_control.value = true;
65 // 删除可能存在的签名 81 // 删除可能存在的签名
66 - image_url.value = '' 82 + image_url.value = "";
67 - props.item.value = { key: 'sign', value: '' }; 83 + props.item.value = { key: "sign", value: "" };
68 - emit('active', props.item.value) 84 + emit("active", props.item.value);
69 -} 85 +};
70 86
71 const handleGenerate = () => { 87 const handleGenerate = () => {
72 - esign.value.generate() 88 + esign.value
73 - .then(async res => { 89 + .generate()
74 - // let fileName = "img1.png"; 90 + .then(async (res) => {
75 - // let file = this.dataURLtoFile(res, fileName); 91 + // let fileName = "img1.png";
76 - // console.log("file", file); 92 + // let file = this.dataURLtoFile(res, fileName);
77 - let affix = uuidv4(); 93 + // console.log("file", file);
78 - let base64url = res.slice(res.indexOf(',') + 1); // 截取前缀的base64 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA....... 94 + let affix = uuidv4();
79 - // 获取七牛token 95 + let base64url = res.slice(res.indexOf(",") + 1); // 截取前缀的base64 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
80 - const { token, key, code } = await qiniuTokenAPI({ filename: `${affix}_sign`, file: base64url }); 96 + // 获取七牛token
81 - if (code) { 97 + const { token, key, code } = await qiniuTokenAPI({
82 - const config = { 98 + filename: `${affix}_sign`,
83 - headers: { 99 + file: base64url,
84 - 'Content-Type': 'application/octet-stream', 100 + });
85 - 'Authorization': 'UpToken ' + token, // UpToken后必须有一个 ' '(空格) 101 + if (code) {
102 + const config = {
103 + headers: {
104 + "Content-Type": "application/octet-stream",
105 + Authorization: "UpToken " + token, // UpToken后必须有一个 ' '(空格)
106 + },
107 + };
108 + // 上传七牛服务器
109 + const { filekey, hash, image_info } = await qiniuUploadAPI(
110 + "http://upload.qiniup.com/putb64/-1/key/" + key,
111 + base64url,
112 + config
113 + );
114 + if (filekey) {
115 + // 保存图片
116 + const { data } = await saveFileAPI({
117 + filekey,
118 + hash,
119 + format: image_info.format,
120 + height: image_info.height,
121 + width: image_info.width,
122 + });
123 + props.item.value = { key: "sign", value: data.src };
124 + image_url.value = data.src;
125 + show_control.value = false;
126 + show_empty.value = false;
127 + emit("active", props.item.value);
86 } 128 }
87 } 129 }
88 - // 上传七牛服务器 130 + })
89 - const { filekey, hash, image_info } = await qiniuUploadAPI('http://upload.qiniup.com/putb64/-1/key/' + key, base64url, config) 131 + .catch((err) => {
90 - if (filekey) { 132 + // 签名生成失败
91 - // 保存图片 133 + console.warn(err);
92 - const { data } = await saveFileAPI({ filekey, hash, format: image_info.format, height: image_info.height, width: image_info.width }); 134 + if (err) {
93 - props.item.value = { key: 'sign', value: data.src}; 135 + showFailToast("签名生成失败");
94 - image_url.value = data.src;
95 - show_control.value = false;
96 - show_empty.value = false;
97 - emit('active', props.item.value)
98 } 136 }
99 - } 137 + });
100 - }) 138 +};
101 - .catch(err => {
102 - // 签名生成失败
103 - console.warn(err);
104 - if (err) {
105 - showFailToast('签名生成失败');
106 - }
107 - })
108 -}
109 139
110 //将图片base64转换为文件 140 //将图片base64转换为文件
111 const dataURLtoFile = (dataurl, filename) => { 141 const dataURLtoFile = (dataurl, filename) => {
...@@ -118,18 +148,18 @@ const dataURLtoFile = (dataurl, filename) => { ...@@ -118,18 +148,18 @@ const dataURLtoFile = (dataurl, filename) => {
118 u8arr[n] = bstr.charCodeAt(n); 148 u8arr[n] = bstr.charCodeAt(n);
119 } 149 }
120 return new File([u8arr], filename, { type: mime }); 150 return new File([u8arr], filename, { type: mime });
121 -} 151 +};
122 152
123 const show_sign = ref(true); 153 const show_sign = ref(true);
124 const startSign = () => { 154 const startSign = () => {
125 show_sign.value = false; 155 show_sign.value = false;
126 show_empty.value = false; 156 show_empty.value = false;
127 -} 157 +};
128 const cancelSign = () => { 158 const cancelSign = () => {
129 show_sign.value = true; 159 show_sign.value = true;
130 show_empty.value = false; 160 show_empty.value = false;
131 - handleReset() 161 + handleReset();
132 -} 162 +};
133 163
134 const validSign = () => { 164 const validSign = () => {
135 // 必填项 未生成签名 165 // 必填项 未生成签名
...@@ -138,8 +168,8 @@ const validSign = () => { ...@@ -138,8 +168,8 @@ const validSign = () => {
138 } else { 168 } else {
139 show_empty.value = false; 169 show_empty.value = false;
140 } 170 }
141 - return !show_empty.value 171 + return !show_empty.value;
142 -} 172 +};
143 173
144 defineExpose({ validSign }); 174 defineExpose({ validSign });
145 </script> 175 </script>
...@@ -154,7 +184,6 @@ export default { ...@@ -154,7 +184,6 @@ export default {
154 } 184 }
155 </script> --> 185 </script> -->
156 186
157 -
158 <style lang="less" scoped> 187 <style lang="less" scoped>
159 .sign-page { 188 .sign-page {
160 // padding-bottom: 1rem; 189 // padding-bottom: 1rem;
...@@ -168,7 +197,7 @@ export default { ...@@ -168,7 +197,7 @@ export default {
168 } 197 }
169 } 198 }
170 .sign-wrapper { 199 .sign-wrapper {
171 - border: 1px solid #EAEAEA; 200 + border: 1px solid #eaeaea;
172 border-radius: 5px; 201 border-radius: 5px;
173 } 202 }
174 .whiteboard { 203 .whiteboard {
......
...@@ -7,34 +7,50 @@ ...@@ -7,34 +7,50 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="time-picker-field"> 9 <div class="time-picker-field">
10 - <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required" 11 + {{ item.component_props.label
12 - :placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" /> 12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 + </div>
14 + <van-field
15 + v-model="item.value"
16 + is-link
17 + readonly
18 + :name="item.key"
19 + :required="item.component_props.required"
20 + :placeholder="item.component_props.placeholder"
21 + :rules="item.rules"
22 + @click="showPicker = true"
23 + />
13 <van-popup v-model:show="showPicker" position="bottom"> 24 <van-popup v-model:show="showPicker" position="bottom">
14 - <van-time-picker v-model="currentTime" :title="item.component_props.title" :columns-type="item.component_props.columns_type" @confirm="onConfirm" 25 + <van-time-picker
15 - @cancel="showPicker = false" /> 26 + v-model="currentTime"
27 + :title="item.component_props.title"
28 + :columns-type="item.component_props.columns_type"
29 + @confirm="onConfirm"
30 + @cancel="showPicker = false"
31 + />
16 </van-popup> 32 </van-popup>
17 </div> 33 </div>
18 </template> 34 </template>
19 35
20 <script setup> 36 <script setup>
21 -import dayjs from 'dayjs'; 37 +import dayjs from "dayjs";
22 38
23 const props = defineProps({ 39 const props = defineProps({
24 - item: Object 40 + item: Object,
25 -}) 41 +});
26 42
27 const showPicker = ref(false); 43 const showPicker = ref(false);
28 const currentTime = ref([]); 44 const currentTime = ref([]);
29 45
30 const onConfirm = ({ selectedValues, selectedOptions }) => { 46 const onConfirm = ({ selectedValues, selectedOptions }) => {
31 - props.item.value = selectedValues[0] + ':' + selectedValues[1]; 47 + props.item.value = selectedValues[0] + ":" + selectedValues[1];
32 showPicker.value = false; 48 showPicker.value = false;
33 }; 49 };
34 50
35 onMounted(() => { 51 onMounted(() => {
36 - currentTime.value = props.item.value.split(':') 52 + currentTime.value = props.item.value.split(":");
37 -}) 53 +});
38 </script> 54 </script>
39 55
40 <style lang="less" scoped> 56 <style lang="less" scoped>
......
...@@ -97,7 +97,6 @@ const sign = ref(null); ...@@ -97,7 +97,6 @@ const sign = ref(null);
97 const rate_picker = ref(null); 97 const rate_picker = ref(null);
98 98
99 const onSubmit = async (values) => { 99 const onSubmit = async (values) => {
100 - console.warn(values);
101 // 合并自定义字段到提交表单字段 100 // 合并自定义字段到提交表单字段
102 postData.value = _.assign(postData.value, values); 101 postData.value = _.assign(postData.value, values);
103 // 检查非表单输入项 102 // 检查非表单输入项
...@@ -112,6 +111,7 @@ const onSubmit = async (values) => { ...@@ -112,6 +111,7 @@ const onSubmit = async (values) => {
112 // console.warn("提交成功"); 111 // console.warn("提交成功");
113 // console.warn(data); 112 // console.warn(data);
114 // } 113 // }
114 + console.warn(postData.value);
115 console.warn("通过验证"); 115 console.warn("通过验证");
116 } else { 116 } else {
117 console.warn("不通过验证"); 117 console.warn("不通过验证");
...@@ -123,8 +123,8 @@ const onActive = (item) => { ...@@ -123,8 +123,8 @@ const onActive = (item) => {
123 if (item.key === "sign") { 123 if (item.key === "sign") {
124 postData.value["sign"] = item.value; 124 postData.value["sign"] = item.value;
125 } 125 }
126 - if (item.key === "rate") { 126 + if (item.type === "rate") {
127 - postData.value["rate"] = item.value; 127 + postData.value = _.assign(postData.value, { [item.key]: item.value });
128 } 128 }
129 }; 129 };
130 130
......