tianheng-ui 0.0.57 → 0.0.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/index.js +1 -1
  2. package/lib/theme-chalk/index.scss +1 -0
  3. package/lib/theme-chalk/styles/upload.scss +598 -0
  4. package/lib/tianheng-ui.js +12 -12
  5. package/package.json +2 -2
  6. package/packages/Col/index.vue +1 -1
  7. package/packages/FormMaking/Container.vue +156 -1308
  8. package/packages/FormMaking/GenerateForm.vue +1 -0
  9. package/packages/Workflow/index.vue +1 -0
  10. package/packages/upload/index.vue +1 -1
  11. package/packages/upload/upload-dragger.vue +1 -1
  12. package/packages/upload/upload-list.vue +68 -46
package/packages/FormMaking/Container.vue CHANGED
@@ -111,29 +111,36 @@
111
111
  ></i>
112
112
  </div>
113
113
  <slot name="action"> </slot>
114
- <el-upload
115
- action
116
- accept=".xlsx, .xls"
117
- :auto-upload="false"
118
- :show-file-list="false"
119
- :on-change="onExcelFileChange"
120
- >
114
+ <el-popover placement="top" trigger="hover" style="margin:0 10px;">
121
115
  <el-button
122
- v-if="upload"
123
116
  type="text"
124
117
  size="medium"
125
118
  icon="el-icon-upload2"
126
- >导入EXCEL
127
- </el-button>
128
- </el-upload>
129
- <el-button
130
- v-if="upload"
131
- type="text"
132
- size="medium"
133
- icon="el-icon-upload2"
134
- @click="dialog.import.visible = true"
135
- >导入JSON
136
- </el-button>
119
+ slot="reference"
120
+ >导入</el-button
121
+ >
122
+ <div>
123
+ <el-upload
124
+ action
125
+ accept=".xlsx, .xls"
126
+ :auto-upload="false"
127
+ :show-file-list="false"
128
+ :on-change="onExcelFileChange"
129
+ >
130
+ <el-button v-if="upload" type="text" size="medium"
131
+ >导入EXCEL
132
+ </el-button>
133
+ </el-upload>
134
+ <el-button
135
+ v-if="upload"
136
+ type="text"
137
+ size="medium"
138
+ @click="dialog.import.visible = true"
139
+ >导入JSON
140
+ </el-button>
141
+ </div>
142
+ </el-popover>
143
+
137
144
  <el-button
138
145
  v-if="clearable"
139
146
  type="text"
@@ -362,7 +369,7 @@ import {
362
369
  } from "./custom/config";
363
370
  import request from "./util/request";
364
371
  import generateCode from "./util/generateCode.js";
365
- import * as XLSX from 'xlsx/xlsx.mjs'
372
+ import * as XLSX from "xlsx/xlsx.mjs";
366
373
 
367
374
  export default {
368
375
  name: "th-making-form",
@@ -501,1312 +508,153 @@ export default {
501
508
  return list;
502
509
  }
503
510
  },
504
- mounted() {
505
- this.dialog.import.value = JSON.stringify(
506
- {
507
- list: [
508
- {
509
- name: "文字",
510
- type: "text",
511
- icon: "icon-wenzishezhi-",
512
- options: {
513
- width: "100%",
514
- height: "",
515
- labelWidth: 100,
516
- isLabelWidth: false,
517
- defaultValue: "<h1>客户信息登记表</h1>",
518
- customClass: "",
519
- textAlign: "center",
520
- hidden: false,
521
- hideLabel: true
522
- },
523
- key: "1667436175000_53693",
524
- model: "title",
525
- rules: []
526
- },
527
- {
528
- name: "栅格布局",
529
- type: "grid",
530
- icon: "icon-grid-",
531
- columns: [
532
- {
533
- span: 6,
534
- list: [
535
- {
536
- name: "姓名",
537
- type: "input",
538
- icon: "icon-input",
539
- options: {
540
- width: "100%",
541
- labelWidth: 100,
542
- isLabelWidth: false,
543
- defaultValue: "",
544
- dataType: "string",
545
- pattern: "",
546
- placeholder: "",
547
- maxlength: -1,
548
- required: true,
549
- disabled: false,
550
- readonly: false,
551
- clearable: false,
552
- showWordLimit: false,
553
- showPassword: false,
554
- prefixIcon: "",
555
- suffixIcon: "",
556
- prepend: "",
557
- append: "",
558
- hidden: false,
559
- hideLabel: false
560
- },
561
- events: {
562
- onChange: "",
563
- onFocus: "",
564
- onBlur: ""
565
- },
566
- key: "1667436225000_44507",
567
- model: "name",
568
- rules: [
569
- {
570
- type: "string",
571
- message: "姓名格式不正确"
572
- },
573
- {
574
- required: true,
575
- message: "姓名必须填写"
576
- }
577
- ]
578
- }
579
- ]
580
- },
581
- {
582
- span: 6,
583
- list: [
584
- {
585
- name: "性别",
586
- type: "select",
587
- icon: "icon-select",
588
- options: {
589
- width: "100%",
590
- labelWidth: 100,
591
- isLabelWidth: false,
592
- defaultValue: "",
593
- multiple: false,
594
- disabled: false,
595
- clearable: false,
596
- placeholder: "",
597
- required: true,
598
- showLabel: false,
599
- collapseTags: false,
600
- allowCreate: false,
601
- options: [
602
- {
603
- value: "男"
604
- },
605
- {
606
- value: "女"
607
- }
608
- ],
609
- remote: false,
610
- filterable: false,
611
- remoteOptions: [],
612
- props: {
613
- value: "value",
614
- label: "label"
615
- },
616
- remoteFunc: "",
617
- hidden: false,
618
- hideLabel: false
619
- },
620
- events: {
621
- onChange: "",
622
- onFocus: "",
623
- onBlur: ""
624
- },
625
- key: "1667437660000_16321",
626
- model: "select_1667437660000_16321",
627
- rules: [
628
- {
629
- required: true,
630
- message: "性别必须填写"
631
- }
632
- ]
633
- }
634
- ]
635
- },
636
- {
637
- span: 6,
638
- list: [
639
- {
640
- name: "年龄",
641
- type: "input",
642
- icon: "icon-input",
643
- options: {
644
- width: "100%",
645
- labelWidth: 100,
646
- isLabelWidth: false,
647
- defaultValue: "",
648
- dataType: "integer",
649
- pattern: "",
650
- placeholder: "",
651
- maxlength: -1,
652
- required: true,
653
- disabled: false,
654
- readonly: false,
655
- clearable: false,
656
- showWordLimit: false,
657
- showPassword: false,
658
- prefixIcon: "",
659
- suffixIcon: "",
660
- prepend: "",
661
- append: "",
662
- hidden: false,
663
- hideLabel: false
664
- },
665
- events: {
666
- onChange: "",
667
- onFocus: "",
668
- onBlur: ""
669
- },
670
- key: "1667436683000_52927",
671
- model: "input_1667436683000_52927",
672
- rules: [
673
- {
674
- type: "integer",
675
- message: "年龄格式不正确"
676
- },
677
- {
678
- required: true,
679
- message: "年龄必须填写"
680
- }
681
- ]
682
- }
683
- ]
684
- },
685
- {
686
- span: 6,
687
- list: [
688
- {
689
- name: "民族",
690
- type: "input",
691
- icon: "icon-input",
692
- options: {
693
- width: "100%",
694
- labelWidth: 100,
695
- isLabelWidth: false,
696
- defaultValue: "",
697
- dataType: "string",
698
- pattern: "",
699
- placeholder: "",
700
- maxlength: -1,
701
- required: false,
702
- disabled: false,
703
- readonly: false,
704
- clearable: false,
705
- showWordLimit: false,
706
- showPassword: false,
707
- prefixIcon: "",
708
- suffixIcon: "",
709
- prepend: "",
710
- append: "",
711
- hidden: false,
712
- hideLabel: false
713
- },
714
- events: {
715
- onChange: "",
716
- onFocus: "",
717
- onBlur: ""
718
- },
719
- key: "1667436685000_14989",
720
- model: "input_1667436685000_14989",
721
- rules: [
722
- {
723
- type: "string",
724
- message: "民族格式不正确"
725
- }
726
- ]
727
- }
728
- ]
729
- }
730
- ],
731
- options: {
732
- gutter: 0,
733
- justify: "start",
734
- align: "top",
735
- hideLabel: true
736
- },
737
- key: "1667436223000_412",
738
- model: "base",
739
- rules: []
740
- },
741
- {
742
- name: "栅格布局",
743
- type: "grid",
744
- icon: "icon-grid-",
745
- columns: [
746
- {
747
- span: 6,
748
- list: [
749
- {
750
- name: "学历",
751
- type: "select",
752
- icon: "icon-select",
753
- options: {
754
- width: "100%",
755
- labelWidth: 100,
756
- isLabelWidth: false,
757
- defaultValue: "",
758
- multiple: false,
759
- disabled: false,
760
- clearable: false,
761
- placeholder: "",
762
- required: false,
763
- showLabel: false,
764
- collapseTags: false,
765
- allowCreate: false,
766
- options: [
767
- {
768
- value: "小学"
769
- },
770
- {
771
- value: "初中"
772
- },
773
- {
774
- value: "高中"
775
- },
776
- {
777
- value: "专科",
778
- label: "新选项4"
779
- },
780
- {
781
- value: "本科",
782
- label: "新选项5"
783
- },
784
- {
785
- value: "其他",
786
- label: "新选项6"
787
- }
788
- ],
789
- remote: false,
790
- filterable: false,
791
- remoteOptions: [],
792
- props: {
793
- value: "value",
794
- label: "label"
795
- },
796
- remoteFunc: "",
797
- hidden: false,
798
- hideLabel: false
799
- },
800
- events: {
801
- onChange: "",
802
- onFocus: "",
803
- onBlur: ""
804
- },
805
- key: "1667437689000_69814",
806
- model: "select_1667437689000_69814",
807
- rules: []
808
- }
809
- ]
810
- },
811
- {
812
- span: 6,
813
- list: [
814
- {
815
- name: "籍贯",
816
- type: "input",
817
- icon: "icon-input",
818
- options: {
819
- width: "100%",
820
- labelWidth: 100,
821
- isLabelWidth: false,
822
- defaultValue: "",
823
- dataType: "string",
824
- pattern: "",
825
- placeholder: "",
826
- maxlength: -1,
827
- required: false,
828
- disabled: false,
829
- readonly: false,
830
- clearable: false,
831
- showWordLimit: false,
832
- showPassword: false,
833
- prefixIcon: "",
834
- suffixIcon: "",
835
- prepend: "",
836
- append: "",
837
- hidden: false,
838
- hideLabel: false
839
- },
840
- events: {
841
- onChange: "",
842
- onFocus: "",
843
- onBlur: ""
844
- },
845
- key: "1667436627000_48070",
846
- model: "input_1667436627000_48070",
847
- rules: []
848
- }
849
- ]
850
- },
851
- {
852
- span: 12,
853
- list: [
854
- {
855
- name: "电子邮箱",
856
- type: "input",
857
- icon: "icon-input",
858
- options: {
859
- width: "100%",
860
- labelWidth: 100,
861
- isLabelWidth: false,
862
- defaultValue: "",
863
- dataType: "email",
864
- pattern: "",
865
- placeholder: "",
866
- maxlength: -1,
867
- required: false,
868
- disabled: false,
869
- readonly: false,
870
- clearable: false,
871
- showWordLimit: false,
872
- showPassword: false,
873
- prefixIcon: "",
874
- suffixIcon: "",
875
- prepend: "",
876
- append: "",
877
- hidden: false,
878
- hideLabel: false
879
- },
880
- events: {
881
- onChange: "",
882
- onFocus: "",
883
- onBlur: ""
884
- },
885
- key: "1667436642000_85695",
886
- model: "input_1667436642000_85695",
887
- rules: [
888
- {
889
- type: "email",
890
- message: "电子邮箱格式不正确"
891
- }
892
- ]
893
- }
894
- ]
895
- }
896
- ],
897
- options: {
898
- gutter: 0,
899
- justify: "start",
900
- align: "top",
901
- hideLabel: true
902
- },
903
- key: "1667436612000_92469",
904
- model: "grid_1667436612000_92469",
905
- rules: []
906
- },
907
- {
908
- name: "栅格布局",
909
- type: "grid",
910
- icon: "icon-grid-",
911
- columns: [
912
- {
913
- span: 12,
914
- list: [
915
- {
916
- name: "身份证号",
917
- type: "input",
918
- icon: "icon-input",
919
- options: {
920
- width: "100%",
921
- labelWidth: 100,
922
- isLabelWidth: false,
923
- defaultValue: "",
924
- dataType: "string",
925
- pattern: "",
926
- placeholder: "",
927
- maxlength: -1,
928
- required: false,
929
- disabled: false,
930
- readonly: false,
931
- clearable: false,
932
- showWordLimit: false,
933
- showPassword: false,
934
- prefixIcon: "",
935
- suffixIcon: "",
936
- prepend: "",
937
- append: "",
938
- hidden: false,
939
- hideLabel: false
940
- },
941
- events: {
942
- onChange: "",
943
- onFocus: "",
944
- onBlur: ""
945
- },
946
- key: "1667436654000_38448",
947
- model: "input_1667436654000_38448",
948
- rules: [
949
- {
950
- type: "string",
951
- message: "身份证号格式不正确"
952
- }
953
- ]
954
- },
955
- {
956
- name: "联系方式",
957
- type: "input",
958
- icon: "icon-input",
959
- options: {
960
- width: "100%",
961
- labelWidth: 100,
962
- isLabelWidth: false,
963
- defaultValue: "",
964
- dataType: "integer",
965
- pattern: "",
966
- placeholder: "",
967
- maxlength: -1,
968
- required: true,
969
- disabled: false,
970
- readonly: false,
971
- clearable: false,
972
- showWordLimit: false,
973
- showPassword: false,
974
- prefixIcon: "",
975
- suffixIcon: "",
976
- prepend: "",
977
- append: "",
978
- hidden: false,
979
- hideLabel: false
980
- },
981
- events: {
982
- onChange: "",
983
- onFocus: "",
984
- onBlur: ""
985
- },
986
- key: "1667436747000_64182",
987
- model: "input_1667436747000_64182",
988
- rules: [
989
- {
990
- type: "integer",
991
- message: "联系方式格式不正确"
992
- },
993
- {
994
- required: true,
995
- message: "联系方式必须填写"
996
- }
997
- ]
998
- }
999
- ]
1000
- },
1001
- {
1002
- span: 12,
1003
- list: [
1004
- {
1005
- name: "其他证件号",
1006
- type: "input",
1007
- icon: "icon-input",
1008
- options: {
1009
- width: "100%",
1010
- labelWidth: 100,
1011
- isLabelWidth: false,
1012
- defaultValue: "",
1013
- dataType: "string",
1014
- pattern: "",
1015
- placeholder: "",
1016
- maxlength: -1,
1017
- required: false,
1018
- disabled: false,
1019
- readonly: false,
1020
- clearable: false,
1021
- showWordLimit: false,
1022
- showPassword: false,
1023
- prefixIcon: "",
1024
- suffixIcon: "",
1025
- prepend: "",
1026
- append: "",
1027
- hidden: false,
1028
- hideLabel: false
1029
- },
1030
- events: {
1031
- onChange: "",
1032
- onFocus: "",
1033
- onBlur: ""
1034
- },
1035
- key: "1667436658000_28857",
1036
- model: "input_1667436658000_28857",
1037
- rules: []
1038
- },
1039
- {
1040
- name: "家庭地址",
1041
- type: "input",
1042
- icon: "icon-input",
1043
- options: {
1044
- width: "100%",
1045
- labelWidth: 100,
1046
- isLabelWidth: false,
1047
- defaultValue: "",
1048
- dataType: "string",
1049
- pattern: "",
1050
- placeholder: "",
1051
- maxlength: -1,
1052
- required: false,
1053
- disabled: false,
1054
- readonly: false,
1055
- clearable: false,
1056
- showWordLimit: false,
1057
- showPassword: false,
1058
- prefixIcon: "",
1059
- suffixIcon: "",
1060
- prepend: "",
1061
- append: "",
1062
- hidden: false,
1063
- hideLabel: false
1064
- },
1065
- events: {
1066
- onChange: "",
1067
- onFocus: "",
1068
- onBlur: ""
1069
- },
1070
- key: "1667436744000_71241",
1071
- model: "input_1667436744000_71241",
1072
- rules: []
1073
- }
1074
- ]
1075
- }
1076
- ],
1077
- options: {
1078
- gutter: 0,
1079
- justify: "start",
1080
- align: "top",
1081
- hideLabel: true
1082
- },
1083
- key: "1667436651000_10428",
1084
- model: "grid_1667436651000_10428",
1085
- rules: []
1086
- },
1087
- {
1088
- name: "栅格布局",
1089
- type: "grid",
1090
- icon: "icon-grid-",
1091
- columns: [
1092
- {
1093
- span: 18,
1094
- list: [
1095
- {
1096
- name: "工作单位",
1097
- type: "input",
1098
- icon: "icon-input",
1099
- options: {
1100
- width: "100%",
1101
- labelWidth: 100,
1102
- isLabelWidth: false,
1103
- defaultValue: "",
1104
- dataType: "string",
1105
- pattern: "",
1106
- placeholder: "",
1107
- maxlength: -1,
1108
- required: false,
1109
- disabled: false,
1110
- readonly: false,
1111
- clearable: false,
1112
- showWordLimit: false,
1113
- showPassword: false,
1114
- prefixIcon: "",
1115
- suffixIcon: "",
1116
- prepend: "",
1117
- append: "",
1118
- hidden: false,
1119
- hideLabel: false
1120
- },
1121
- events: {
1122
- onChange: "",
1123
- onFocus: "",
1124
- onBlur: ""
1125
- },
1126
- key: "1667436760000_10945",
1127
- model: "input_1667436760000_10945",
1128
- rules: [
1129
- {
1130
- type: "string",
1131
- message: "工作单位格式不正确"
1132
- }
1133
- ]
1134
- }
1135
- ]
1136
- },
1137
- {
1138
- span: 6,
1139
- list: [
1140
- {
1141
- name: "是否在职",
1142
- type: "select",
1143
- icon: "icon-select",
1144
- options: {
1145
- width: "100%",
1146
- labelWidth: 100,
1147
- isLabelWidth: false,
1148
- defaultValue: "",
1149
- multiple: false,
1150
- disabled: false,
1151
- clearable: false,
1152
- placeholder: "",
1153
- required: true,
1154
- showLabel: false,
1155
- collapseTags: false,
1156
- allowCreate: false,
1157
- options: [
1158
- {
1159
- value: "在职"
1160
- },
1161
- {
1162
- value: "离职"
1163
- },
1164
- {
1165
- value: "其他"
1166
- }
1167
- ],
1168
- remote: false,
1169
- filterable: false,
1170
- remoteOptions: [],
1171
- props: {
1172
- value: "value",
1173
- label: "label"
1174
- },
1175
- remoteFunc: "",
1176
- hidden: false,
1177
- hideLabel: false
1178
- },
1179
- events: {
1180
- onChange: 1667437911752,
1181
- onFocus: "",
1182
- onBlur: ""
1183
- },
1184
- key: "1667437857000_3388",
1185
- model: "select_1667437857000_3388",
1186
- rules: [
1187
- {
1188
- required: true,
1189
- message: "是否在职必须填写"
1190
- }
1191
- ]
1192
- }
1193
- ]
1194
- }
1195
- ],
1196
- options: {
1197
- gutter: 0,
1198
- justify: "start",
1199
- align: "top",
1200
- hideLabel: true
1201
- },
1202
- key: "1667436759000_9701",
1203
- model: "grid_1667436759000_9701",
1204
- rules: []
1205
- },
1206
- {
1207
- name: "栅格布局",
1208
- type: "grid",
1209
- icon: "icon-grid-",
1210
- columns: [
1211
- {
1212
- span: 12,
1213
- list: [
1214
- {
1215
- name: "职务",
1216
- type: "input",
1217
- icon: "icon-input",
1218
- options: {
1219
- width: "100%",
1220
- labelWidth: 100,
1221
- isLabelWidth: false,
1222
- defaultValue: "",
1223
- dataType: "string",
1224
- pattern: "",
1225
- placeholder: "",
1226
- maxlength: -1,
1227
- required: false,
1228
- disabled: false,
1229
- readonly: false,
1230
- clearable: false,
1231
- showWordLimit: false,
1232
- showPassword: false,
1233
- prefixIcon: "",
1234
- suffixIcon: "",
1235
- prepend: "",
1236
- append: "",
1237
- hidden: false,
1238
- hideLabel: false
1239
- },
1240
- events: {
1241
- onChange: "",
1242
- onFocus: "",
1243
- onBlur: ""
1244
- },
1245
- key: "1667437859000_99021",
1246
- model: "input_1667437859000_99021",
1247
- rules: []
1248
- }
1249
- ]
1250
- },
1251
- {
1252
- span: 12,
1253
- list: [
1254
- {
1255
- name: "入职时间",
1256
- type: "date",
1257
- icon: "icon-date",
1258
- options: {
1259
- width: "100%",
1260
- labelWidth: 100,
1261
- isLabelWidth: false,
1262
- defaultValue: "",
1263
- readonly: false,
1264
- disabled: false,
1265
- editable: true,
1266
- clearable: true,
1267
- placeholder: "",
1268
- startPlaceholder: "",
1269
- endPlaceholder: "",
1270
- type: "date",
1271
- format: "yyyy-MM-dd",
1272
- timestamp: false,
1273
- required: false
1274
- },
1275
- events: {
1276
- onChange: "",
1277
- onFocus: "",
1278
- onBlur: ""
1279
- },
1280
- key: "1667437845000_35857",
1281
- model: "date_1667437845000_35857",
1282
- rules: []
1283
- }
1284
- ]
1285
- }
1286
- ],
1287
- options: {
1288
- gutter: 0,
1289
- justify: "start",
1290
- align: "top",
1291
- hideLabel: true
1292
- },
1293
- key: "1667437440000_79157",
1294
- model: "company2",
1295
- rules: []
1296
- },
1297
- {
1298
- name: "家庭常住人口",
1299
- type: "radio",
1300
- icon: "icon-radio-active",
1301
- options: {
1302
- width: "",
1303
- labelWidth: 100,
1304
- isLabelWidth: false,
1305
- inline: true,
1306
- defaultValue: "",
1307
- showLabel: false,
1308
- options: [
1309
- {
1310
- value: "1-2人",
1311
- label: "Option 1"
1312
- },
1313
- {
1314
- value: "3-4人",
1315
- label: "Option 2"
1316
- },
1317
- {
1318
- value: "5-6人",
1319
- label: "Option 3"
1320
- },
1321
- {
1322
- value: "7人及以上",
1323
- label: "新选项4"
1324
- }
1325
- ],
1326
- required: false,
1327
- remote: false,
1328
- remoteOptions: [],
1329
- props: {
1330
- value: "value",
1331
- label: "label"
1332
- },
1333
- remoteFunc: "",
1334
- disabled: false,
1335
- border: false,
1336
- buttonType: false
1337
- },
1338
- events: {
1339
- onChange: ""
1340
- },
1341
- key: "1667436801000_13265",
1342
- model: "radio_1667436801000_13265",
1343
- rules: []
1344
- },
1345
- {
1346
- name: "资产信息",
1347
- type: "divider",
1348
- icon: "icon-fengexian",
1349
- options: {
1350
- width: "100%",
1351
- defaultValue: "资产信息",
1352
- hidden: false,
1353
- labelWidth: 100,
1354
- isLabelWidth: false,
1355
- hideLabel: true,
1356
- contentPosition: "left",
1357
- remoteFunc: "",
1358
- remoteOption: "",
1359
- tableColumn: false
1360
- },
1361
- rules: [],
1362
- key: "1667436969000_57389",
1363
- model: "divider_1667436969000_57389"
1364
- },
1365
- {
1366
- name: "房屋资产",
1367
- type: "tabs",
1368
- icon: "icon-tabs",
1369
- tabs: [
1370
- {
1371
- label: "房屋资产",
1372
- value: "tab1",
1373
- list: [
1374
- {
1375
- name: "子表单",
1376
- type: "table",
1377
- icon: "icon-table",
1378
- options: {
1379
- height: "",
1380
- defaultValue: "",
1381
- customClass: "",
1382
- labelWidth: 100,
1383
- isLabelWidth: false,
1384
- dataBind: true,
1385
- validatorCheck: false,
1386
- validator: "",
1387
- paging: false,
1388
- pageSize: 5,
1389
- remoteFunc: "",
1390
- remoteOption: "",
1391
- tableColumn: false,
1392
- hidden: false,
1393
- hideLabel: true,
1394
- disabled: false,
1395
- required: false,
1396
- isAdd: true,
1397
- isDelete: true,
1398
- isSerial: true,
1399
- border: false,
1400
- stripe: false,
1401
- showHeader: true,
1402
- highlightCurrentRow: false
1403
- },
1404
- list: [
1405
- {
1406
- name: "小区名称",
1407
- type: "input",
1408
- icon: "icon-input",
1409
- options: {
1410
- width: "",
1411
- labelWidth: 100,
1412
- isLabelWidth: false,
1413
- defaultValue: "",
1414
- dataType: "string",
1415
- pattern: "",
1416
- placeholder: "",
1417
- maxlength: -1,
1418
- required: false,
1419
- disabled: false,
1420
- readonly: false,
1421
- clearable: false,
1422
- showWordLimit: false,
1423
- showPassword: false,
1424
- prefixIcon: "",
1425
- suffixIcon: "",
1426
- prepend: "",
1427
- append: "",
1428
- hidden: false,
1429
- hideLabel: true
1430
- },
1431
- events: {
1432
- onChange: "",
1433
- onFocus: "",
1434
- onBlur: ""
1435
- },
1436
- key: "1667437006000_97519",
1437
- model: "input_1667437006000_97519",
1438
- rules: [
1439
- {
1440
- type: "string",
1441
- message: "小区名称格式不正确"
1442
- }
1443
- ]
1444
- },
1445
- {
1446
- name: "房屋总价",
1447
- type: "input",
1448
- icon: "icon-input",
1449
- options: {
1450
- width: "100%",
1451
- labelWidth: 100,
1452
- isLabelWidth: false,
1453
- defaultValue: "",
1454
- dataType: "string",
1455
- pattern: "",
1456
- placeholder: "",
1457
- maxlength: -1,
1458
- required: false,
1459
- disabled: false,
1460
- readonly: false,
1461
- clearable: false,
1462
- showWordLimit: false,
1463
- showPassword: false,
1464
- prefixIcon: "",
1465
- suffixIcon: "",
1466
- prepend: "",
1467
- append: "",
1468
- hidden: false,
1469
- hideLabel: true
1470
- },
1471
- events: {
1472
- onChange: "",
1473
- onFocus: "",
1474
- onBlur: ""
1475
- },
1476
- key: "1667437037000_66597",
1477
- model: "input_1667437037000_66597",
1478
- rules: [
1479
- {
1480
- type: "string",
1481
- message: "房屋总价格式不正确"
1482
- }
1483
- ]
1484
- },
1485
- {
1486
- name: "房屋地址",
1487
- type: "input",
1488
- icon: "icon-input",
1489
- options: {
1490
- width: "",
1491
- labelWidth: 100,
1492
- isLabelWidth: false,
1493
- defaultValue: "",
1494
- dataType: "string",
1495
- pattern: "",
1496
- placeholder: "",
1497
- maxlength: -1,
1498
- required: false,
1499
- disabled: false,
1500
- readonly: false,
1501
- clearable: false,
1502
- showWordLimit: false,
1503
- showPassword: false,
1504
- prefixIcon: "",
1505
- suffixIcon: "",
1506
- prepend: "",
1507
- append: "",
1508
- hidden: false,
1509
- hideLabel: true
1510
- },
1511
- events: {
1512
- onChange: "",
1513
- onFocus: "",
1514
- onBlur: ""
1515
- },
1516
- key: "1667437009000_89874",
1517
- model: "input_1667437009000_89874",
1518
- rules: [
1519
- {
1520
- type: "string",
1521
- message: "房屋地址格式不正确"
1522
- }
1523
- ]
1524
- }
1525
- ],
1526
- key: "1667436993000_20896",
1527
- model: "table_1667436993000_20896",
1528
- rules: []
1529
- }
1530
- ]
1531
- },
1532
- {
1533
- label: "车辆资产",
1534
- value: "tab2",
1535
- list: [
1536
- {
1537
- name: "子表单",
1538
- type: "table",
1539
- icon: "icon-table",
1540
- options: {
1541
- height: "",
1542
- defaultValue: "",
1543
- customClass: "",
1544
- labelWidth: 100,
1545
- isLabelWidth: false,
1546
- dataBind: true,
1547
- validatorCheck: false,
1548
- validator: "",
1549
- paging: false,
1550
- pageSize: 5,
1551
- remoteFunc: "",
1552
- remoteOption: "",
1553
- tableColumn: false,
1554
- hidden: false,
1555
- hideLabel: true,
1556
- disabled: false,
1557
- required: false,
1558
- isAdd: true,
1559
- isDelete: true,
1560
- isSerial: true,
1561
- border: false,
1562
- stripe: false,
1563
- showHeader: true,
1564
- highlightCurrentRow: false
1565
- },
1566
- list: [
1567
- {
1568
- name: "车辆名称",
1569
- type: "input",
1570
- icon: "icon-input",
1571
- options: {
1572
- width: "",
1573
- labelWidth: 100,
1574
- isLabelWidth: false,
1575
- defaultValue: "",
1576
- dataType: "string",
1577
- pattern: "",
1578
- placeholder: "",
1579
- maxlength: -1,
1580
- required: false,
1581
- disabled: false,
1582
- readonly: false,
1583
- clearable: false,
1584
- showWordLimit: false,
1585
- showPassword: false,
1586
- prefixIcon: "",
1587
- suffixIcon: "",
1588
- prepend: "",
1589
- append: "",
1590
- hidden: false,
1591
- hideLabel: true
1592
- },
1593
- events: {
1594
- onChange: "",
1595
- onFocus: "",
1596
- onBlur: ""
1597
- },
1598
- key: "1667437284000_96215",
1599
- model: "carName",
1600
- rules: [
1601
- {
1602
- type: "string",
1603
- message: "车辆名称格式不正确"
1604
- }
1605
- ]
1606
- },
1607
- {
1608
- name: "车辆价格",
1609
- type: "input",
1610
- icon: "icon-input",
1611
- options: {
1612
- width: "100%",
1613
- labelWidth: 100,
1614
- isLabelWidth: false,
1615
- defaultValue: "",
1616
- dataType: "string",
1617
- pattern: "",
1618
- placeholder: "",
1619
- maxlength: -1,
1620
- required: false,
1621
- disabled: false,
1622
- readonly: false,
1623
- clearable: false,
1624
- showWordLimit: false,
1625
- showPassword: false,
1626
- prefixIcon: "",
1627
- suffixIcon: "",
1628
- prepend: "",
1629
- append: "",
1630
- hidden: false,
1631
- hideLabel: true
1632
- },
1633
- events: {
1634
- onChange: "",
1635
- onFocus: "",
1636
- onBlur: ""
1637
- },
1638
- key: "1667437294000_98905",
1639
- model: "input_1667437294000_98905",
1640
- rules: [
1641
- {
1642
- type: "string",
1643
- message: "车辆价格格式不正确"
1644
- }
1645
- ]
1646
- },
1647
- {
1648
- name: "购入日期",
1649
- type: "date",
1650
- icon: "icon-date",
1651
- options: {
1652
- width: "",
1653
- labelWidth: 100,
1654
- isLabelWidth: false,
1655
- defaultValue: "",
1656
- readonly: false,
1657
- disabled: false,
1658
- editable: true,
1659
- clearable: true,
1660
- placeholder: "",
1661
- startPlaceholder: "",
1662
- endPlaceholder: "",
1663
- type: "date",
1664
- format: "yyyy-MM-dd",
1665
- timestamp: false,
1666
- required: false,
1667
- hideLabel: true
1668
- },
1669
- events: {
1670
- onChange: "",
1671
- onFocus: "",
1672
- onBlur: ""
1673
- },
1674
- key: "1667437375000_47132",
1675
- model: "date_1667437375000_47132",
1676
- rules: []
1677
- }
1678
- ],
1679
- key: "1667437282000_33973",
1680
- model: "table_1667437282000_33973",
1681
- rules: []
1682
- }
1683
- ]
1684
- }
1685
- ],
1686
- options: {
1687
- defaultValue: "tab2",
1688
- type: "",
1689
- tabPosition: "top",
1690
- customClass: "",
1691
- hidden: false,
1692
- labelWidth: 100,
1693
- isLabelWidth: false,
1694
- hideLabel: true,
1695
- remote: false,
1696
- remoteFunc: "",
1697
- remoteOption: "",
1698
- tableColumn: false
1699
- },
1700
- rules: [],
1701
- key: "1667436941000_19317",
1702
- model: "tabs_1667436941000_19317"
1703
- }
1704
- ],
1705
- config: {
1706
- ui: "element",
1707
- title: "",
1708
- width: "",
1709
- labelWidth: 100,
1710
- labelPosition: "right",
1711
- labelSuffix: ":",
1712
- size: "small",
1713
- disabled: false,
1714
- hideLabel: false,
1715
- eventScript: [
1716
- {
1717
- key: "mounted",
1718
- name: "mounted",
1719
- func: ""
1720
- },
1721
- {
1722
- key: "refresh",
1723
- name: "refresh",
1724
- func: ""
1725
- },
1726
- {
1727
- key: 1667437911752,
1728
- name: "statusChange",
1729
- func:
1730
- "if(value === '在职') {\n this.display([ 'company2' ])\n}else {\n this.hide([ 'company2' ])\n}"
1731
- }
1732
- ]
1733
- }
1734
- },
1735
- null,
1736
- 2
1737
- );
1738
- },
511
+ mounted() {},
1739
512
  methods: {
1740
513
  // 读取excel file
1741
- readExcelFile(file){//文件读取
514
+ readExcelFile(file) {
515
+ //文件读取
1742
516
  return new Promise(resolve => {
1743
517
  let reader = new FileReader();
1744
- reader.readAsBinaryString(file);//以二进制的方式读取
1745
- reader.onload = ev =>{
518
+ reader.readAsBinaryString(file); //以二进制的方式读取
519
+ reader.onload = ev => {
1746
520
  resolve(ev.target.result);
1747
- }
1748
- })
521
+ };
522
+ });
1749
523
  },
1750
524
  // excel 文件上传 改变监听
1751
525
  async onExcelFileChange(ev) {
1752
526
  let file = ev.raw;
1753
- if(!file){
1754
- console.log("文件打开失败")
1755
- return ;
1756
- }else{
527
+ if (!file) {
528
+ console.log("文件打开失败");
529
+ return;
530
+ } else {
1757
531
  let data = await this.readExcelFile(file);
1758
532
  //XLSX 文档 https://www.npmjs.com/package/xlsx
1759
- let workbook = XLSX.read(data,{ type: "binary"});//解析二进制格式数据
1760
- let worksheet = workbook.Sheets[workbook.SheetNames[0]];//获取第一个Sheet
1761
- let result = XLSX.utils.sheet_to_txt(worksheet);//cvs数据格式
1762
- console.log(result)
533
+ let workbook = XLSX.read(data, { type: "binary" }); //解析二进制格式数据
534
+ let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
1763
535
 
1764
- // let rowData = result.split('\n')
1765
- // if(rowData.length>0){
1766
- // for(let i =0;i<rowData.length;i++){
1767
- // let rowStr = rowData[i]
1768
- // rowData[i] = this.analysisExcelRow(rowStr)
1769
- // }
1770
- // }
1771
- // console.log(rowData)
1772
- // console.log(JSON.stringify(rowData))
1773
- }
1774
- },
1775
- // 解析row 数据
1776
- analysisExcelRow(rowItem) {
1777
- let rowData = {
1778
- colCount: 0,
1779
- col: []
1780
- }
1781
- let array = rowItem.split(',')
1782
- if(array.length > 0){
1783
- rowData.colCount = array.length
1784
- let colItem = {
1785
- span: 0,
1786
- label: ''
536
+ // console.log("XLSX.read => \n", workbook);
537
+ // console.log("sheet_to_json => \n", XLSX.utils.sheet_to_json(worksheet));
538
+ // console.log("sheet_to_csv => \n", XLSX.utils.sheet_to_csv(worksheet));
539
+ // console.log("sheet_to_txt => \n", XLSX.utils.sheet_to_txt(worksheet));
540
+ const xlsxDom = this.parseDom(XLSX.utils.sheet_to_html(worksheet));
541
+ // console.log("sheet_to_html => \n", xlsxDom);
542
+ const rowsDom = xlsxDom.getElementsByTagName("tr");
543
+ console.log("rowsDom =>", rowsDom);
544
+ let rowSpan = 0;
545
+ for (let i = 0; i < rowsDom[0].childNodes.length; i++) {
546
+ const col = rowsDom[0].childNodes[i];
547
+ rowSpan += col.colSpan || 1;
1787
548
  }
1788
- array.forEach((item, index)=>{
1789
- // 如果读取到的行数据为空 则认为是空格列
1790
- if(item&&item !== ''){
1791
- colItem = {
1792
- span: 0,
1793
- label: item
1794
- }
549
+ console.log("rowSpan =>", rowSpan);
550
+ const colSpan = 24 / rowSpan;
551
+
552
+ let config = {
553
+ list: [],
554
+ config: {
555
+ ui: "element",
556
+ title: "",
557
+ width: "",
558
+ labelWidth: 100,
559
+ labelPosition: "right",
560
+ labelSuffix: ":",
561
+ size: "small",
562
+ disabled: false,
563
+ hideLabel: false,
564
+ eventScript: [
565
+ {
566
+ key: "mounted",
567
+ name: "mounted",
568
+ func: ""
569
+ },
570
+ {
571
+ key: "refresh",
572
+ name: "refresh",
573
+ func: ""
574
+ }
575
+ ]
1795
576
  }
1796
- colItem.span++
1797
- if(index === array.length-1){
1798
- rowData.col.push(colItem)
1799
- }else{
1800
- // 如果下一条数据有值，前面的列为一个整体作为一条元素
1801
- let nextItem = array[index+1]
1802
- if(nextItem&&nextItem !== ''){
1803
- rowData.col.push(colItem)
577
+ };
578
+
579
+ for (const row of rowsDom) {
580
+ const key =
581
+ Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
582
+ let grid = this.getComponentsConfig("grid");
583
+ grid.columns = [];
584
+ grid.key = key;
585
+ grid.model = "grid_" + key;
586
+
587
+ const colsDom = row.childNodes;
588
+ console.log("colsDom =>", colsDom);
589
+ // continue;
590
+ let span = 0;
591
+ for (let i = 0; i < colsDom.length; i++) {
592
+ if (i % 2 === 0) span = 0;
593
+ else continue;
594
+
595
+ const colKey =
596
+ Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
597
+ const col1 = colsDom[i];
598
+ const col2 = colsDom[i + 1];
599
+ if (!col1.innerText && !col2.innerText) continue;
600
+
601
+ if (colsDom[i + 1]) {
602
+ span = ((col1.colSpan || 1) + (col2.colSpan || 1)) * colSpan;
603
+
604
+ const data = this.getComponentsConfig("input");
605
+ data.name = col1.innerText;
606
+ data.options.defaultValue = col2.innerText;
607
+ data.key = colKey;
608
+ data.model = "input_" + colKey;
609
+ grid.columns.push({ span: span, list: [data] });
610
+ } else {
611
+ span = col1.colSpan * colSpan;
612
+
613
+ const data = this.getComponentsConfig("text");
614
+ data.name = col1.innerText;
615
+ data.options.defaultValue = col1.innerText;
616
+ data.options.hideLabel = true;
617
+ data.key = colKey;
618
+ data.model = "text_" + colKey;
619
+ grid.columns.push({ span: span, list: [data] });
1804
620
  }
1805
621
  }
1806
- })
622
+ if (grid.columns.length) {
623
+ config.list.push(grid);
624
+ } else {
625
+ const data = this.getComponentsConfig("filler");
626
+ data.name = "";
627
+ data.key = key;
628
+ data.model = "filler_" + key;
629
+ config.list.push(data);
630
+ }
631
+ }
632
+ this.setJSON(config);
1807
633
  }
1808
- return rowData
1809
634
  },
635
+ getComponentsConfig(type) {
636
+ let data = null;
637
+ for (const item of this.basicComponents) {
638
+ if (type === item.type) {
639
+ data = JSON.parse(JSON.stringify(item));
640
+ return data;
641
+ }
642
+ }
643
+ for (const item of this.layoutComponents) {
644
+ if (type === item.type) {
645
+ data = JSON.parse(JSON.stringify(item));
646
+ return data;
647
+ }
648
+ }
649
+ return data;
650
+ },
651
+
652
+ parseDom(arg) {
653
+ var objE = document.createElement("div");
654
+ objE.innerHTML = arg;
655
+ return objE.childNodes[2];
656
+ },
657
+
1810
658
  initClipboard() {
1811
659
  if (!this.jsonClipboard) {
1812
660
  this.jsonClipboard = new Clipboard(".json-btn");