Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
57cde0ab 1 parent 0c5b3a9c

✨ feat: 调整相关控件，图片上传组件新增七牛生成URL

Inline Side-by-side
Showing 4 changed files with 72 additions and 51 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-31 11:45:30 2 * @Date: 2022-08-31 11:45:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-08-31 13:33:45 4 + * @LastEditTime: 2022-09-07 13:52:57
5 * @FilePath: /data-table/src/components/DatePickerField/index.vue 5 * @FilePath: /data-table/src/components/DatePickerField/index.vue
6 * @Description: 日期选择组件 6 * @Description: 日期选择组件
7 --> 7 -->
...@@ -32,7 +32,10 @@ const onConfirm = ({ selectedValues, selectedOptions }) => { ...@@ -32,7 +32,10 @@ const onConfirm = ({ selectedValues, selectedOptions }) => {
32 props.item.value = selectedValues[0] + '-' + selectedValues[1]; 32 props.item.value = selectedValues[0] + '-' + selectedValues[1];
33 showPicker.value = false; 33 showPicker.value = false;
34 }; 34 };
35 -// console.warn(dayjs().format('YYYY')); 35 +
36 +onMounted(() => {
37 + currentDate.value = props.item.value.split('-')
38 +})
36 </script> 39 </script>
37 40
38 <style lang="less" scoped> 41 <style lang="less" scoped>
......
1 <!-- 1 <!--
2 * @Date: 2022-08-31 16:16:49 2 * @Date: 2022-08-31 16:16:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-06 14:49:08 4 + * @LastEditTime: 2022-09-07 13:56:29
5 * @FilePath: /data-table/src/components/ImageUploaderField/index.vue 5 * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -25,6 +25,8 @@ ...@@ -25,6 +25,8 @@
25 */ 25 */
26 import { Toast } from 'vant'; 26 import { Toast } from 'vant';
27 import _ from 'lodash' 27 import _ from 'lodash'
28 +import { v4 as uuidv4 } from 'uuid';
29 +import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
28 30
29 const props = defineProps({ 31 const props = defineProps({
30 item: Object 32 item: Object
...@@ -53,9 +55,27 @@ const beforeRead = (file) => { ...@@ -53,9 +55,27 @@ const beforeRead = (file) => {
53 return flag; 55 return flag;
54 }; 56 };
55 57
56 -const afterRead = (file) => { 58 +const afterRead = async (file) => {
57 // 此时可以自行将文件上传至服务器 59 // 此时可以自行将文件上传至服务器
58 - console.log(file); 60 + let affix = uuidv4();
61 + let base64url = file.content.slice(file.content.indexOf(',') + 1); // 截取前缀的base64 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
62 + // 获取七牛token
63 + const { token, key, code } = await qiniuTokenAPI({ filename: `${affix}_image_upload`, file: base64url });
64 + if (code) {
65 + const config = {
66 + headers: {
67 + 'Content-Type': 'application/octet-stream',
68 + 'Authorization': 'UpToken ' + token, // UpToken后必须有一个 ' '(空格)
69 + }
70 + }
71 + // 上传七牛服务器
72 + const { filekey, hash, image_info } = await qiniuUploadAPI('http://upload.qiniup.com/putb64/-1/key/' + key, base64url, config)
73 + if (filekey) {
74 + // 保存图片
75 + const { data } = await saveFileAPI({ filekey, hash, format: image_info.format, height: image_info.height, width: image_info.width });
76 + console.warn(data.src);
77 + }
78 + }
59 }; 79 };
60 80
61 const fileList = ref([ 81 const fileList = ref([
......
...@@ -17,10 +17,10 @@ import SignField from '@/components/SignField/index.vue' ...@@ -17,10 +17,10 @@ import SignField from '@/components/SignField/index.vue'
17 * @param {*} data 17 * @param {*} data
18 * @type text 单行文本 TextField 18 * @type text 单行文本 TextField
19 * @type textarea 多行文本 TextareaField 19 * @type textarea 多行文本 TextareaField
20 - * @type radio 单选框 RadioField 20 + * @type radio 单项选择 RadioField
21 - * @type checkbox 多选框 CheckboxField 21 + * @type checkbox 多项选择 CheckboxField
22 * @type picker 单列选择器 PickerField 22 * @type picker 单列选择器 PickerField
23 - * @type area_picker 省市区选择器 AreaPickerField 23 + * @type area_picker 地址选择器 AreaPickerField
24 * @type date_picker 日期选择器 DatePickerField 24 * @type date_picker 日期选择器 DatePickerField
25 * @type image_uploader 图片上传 ImageUploaderField 25 * @type image_uploader 图片上传 ImageUploaderField
26 * @type phone 手机输入框 PhoneField 26 * @type phone 手机输入框 PhoneField
......
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-06 18:25:18 4 + * @LastEditTime: 2022-09-07 14:12:37
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -44,17 +44,17 @@ onMounted(() => { ...@@ -44,17 +44,17 @@ onMounted(() => {
44 // }, 44 // },
45 // required: true, 45 // required: true,
46 // }, 46 // },
47 - { 47 + // {
48 - key: 'username', 48 + // key: 'username',
49 - value: 'test', 49 + // value: 'test',
50 - label: '用户名', 50 + // label: '用户名',
51 - placeholder: '请输入用户名', 51 + // placeholder: '请输入用户名',
52 - component: '', 52 + // component: '',
53 - component_props: { 53 + // component_props: {
54 - name: 'text' 54 + // name: 'text'
55 - }, 55 + // },
56 - required: true, 56 + // required: true,
57 - }, 57 + // },
58 // { 58 // {
59 // key: 'email', 59 // key: 'email',
60 // value: '', 60 // value: '',
...@@ -98,7 +98,6 @@ onMounted(() => { ...@@ -98,7 +98,6 @@ onMounted(() => {
98 // key: 'hobby', 98 // key: 'hobby',
99 // value: [], 99 // value: [],
100 // label: '兴趣爱好', 100 // label: '兴趣爱好',
101 - // placeholder: '',
102 // component: '', 101 // component: '',
103 // component_props: { 102 // component_props: {
104 // name: 'checkbox' 103 // name: 'checkbox'
...@@ -113,7 +112,7 @@ onMounted(() => { ...@@ -113,7 +112,7 @@ onMounted(() => {
113 // }, 112 // },
114 // { 113 // {
115 // key: 'message', 114 // key: 'message',
116 - // value: 'zzz', 115 + // value: '一种可以用来记录，展示文字信息的载体，有比较强的时效性。一般以黑板、木板为载体。用来留言。各种各样的留言使用。留言板还有引申的“网络留言板”。这个和网络留言本不一样的地方是留言板一般比较集中的反应信息的。',
117 // label: '留言', 116 // label: '留言',
118 // placeholder: '请输入留言', 117 // placeholder: '请输入留言',
119 // component: '', 118 // component: '',
...@@ -137,30 +136,30 @@ onMounted(() => { ...@@ -137,30 +136,30 @@ onMounted(() => {
137 // ], 136 // ],
138 // required: true, 137 // required: true,
139 // }, 138 // },
140 - {
141 - key: 'sign',
142 - value: '',
143 - label: '电子签名',
144 - placeholder: '',
145 - component: '',
146 - component_props: {
147 - name: 'sign'
148 - },
149 - },
150 { 139 {
151 - key: 'city', 140 + key: 'sign',
152 - value: '天津市/天津市/和平区', 141 + value: '',
153 - city_code: '120101', 142 + label: '电子签名',
154 - label: '地址', 143 + placeholder: '',
155 - address: '', 144 + component: '',
156 - placeholder: '请选择省市区',
157 component_props: { 145 component_props: {
158 - name: 'area_picker' 146 + name: 'sign'
159 }, 147 },
160 }, 148 },
161 // { 149 // {
150 + // key: 'city',
151 + // value: '天津市/天津市/和平区',
152 + // city_code: '120101',
153 + // label: '地址',
154 + // address: '',
155 + // placeholder: '请选择省市区',
156 + // component_props: {
157 + // name: 'area_picker'
158 + // },
159 + // },
160 + // {
162 // key: 'datetime', 161 // key: 'datetime',
163 - // value: [], 162 + // value: '2022-10',
164 // label: '日期选择', 163 // label: '日期选择',
165 // placeholder: '请选择日期', 164 // placeholder: '请选择日期',
166 // component_props: { 165 // component_props: {
...@@ -170,16 +169,16 @@ onMounted(() => { ...@@ -170,16 +169,16 @@ onMounted(() => {
170 // columns_type: ['year', 'month'] 169 // columns_type: ['year', 'month']
171 // }, 170 // },
172 // }, 171 // },
173 - { 172 + // {
174 - key: 'imageUploader', 173 + // key: 'image_src',
175 - value: '', 174 + // value: '',
176 - label: '图片上传', 175 + // label: '图片上传',
177 - component_props: { 176 + // component_props: {
178 - name: 'image_uploader', 177 + // name: 'image_uploader',
179 - image_type: ['jpg', 'png'], 178 + // image_type: ['jpg', 'png'],
180 - multiple: false 179 + // multiple: false
181 - } 180 + // }
182 - } 181 + // }
183 ]; 182 ];
184 // 生成自定义组件 183 // 生成自定义组件
185 createComponentType(mockData.value) 184 createComponentType(mockData.value)
...@@ -189,7 +188,6 @@ const onSubmit = (values) => { ...@@ -189,7 +188,6 @@ const onSubmit = (values) => {
189 console.log('submit', values); 188 console.log('submit', values);
190 // console.warn(mockData.value); 189 // console.warn(mockData.value);
191 }; 190 };
192 -
193 </script> 191 </script>
194 192
195 <style lang="less" scoped> 193 <style lang="less" scoped>
......