index.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <template>
  2. <div class="oprea" v-if="option.opreaState">
  3. <div class="header">
  4. <div style="display: flex">
  5. <span class="btn" v-if="option.out" @click="downloadExcel">导 出</span>
  6. <el-upload
  7. accept=".xlsx"
  8. ref="upload"
  9. :on-change="leadingExcel"
  10. :auto-upload="false"
  11. :show-file-list="false"
  12. class="in"
  13. v-if="option.in"
  14. >
  15. <template #trigger>
  16. <span class="btn">导 入</span>
  17. </template>
  18. </el-upload>
  19. </div>
  20. <div class="info" v-if="option.opreaTitle">
  21. 当前操作表格:{{ inName == "" ? "-" : inName }}
  22. </div>
  23. </div>
  24. </div>
  25. <div
  26. id="luckysheet"
  27. :style="{
  28. top:
  29. option.opreaState == false ||
  30. option.edit == false ||
  31. (option.in == false && option.out == false && option.confirm == false)
  32. ? 0
  33. : 60,
  34. }"
  35. ></div>
  36. <div v-show="isMaskShow" id="tip">Downloading</div>
  37. </template>
  38. <script setup>
  39. import { ref, onMounted, watch } from "vue";
  40. import { exportExcel } from "./export";
  41. import LuckyExcel from "luckyexcel";
  42. import resData from "./resetData";
  43. const props = defineProps({
  44. //双向绑定的data
  45. data: {
  46. type: [Object, null],
  47. default: null,
  48. },
  49. //配置项
  50. option: {
  51. type: Object,
  52. default: () => ({
  53. //控制上部分展示
  54. opreaState: true,
  55. in: true,
  56. out: true,
  57. print: true,
  58. edit: true,
  59. inName: "",
  60. opreaTitle: true,
  61. }),
  62. },
  63. //校验区域
  64. verifications: {
  65. type: Array,
  66. default: () => [],
  67. },
  68. //校验状态
  69. checkStatus: {
  70. type: Boolean,
  71. default: false,
  72. },
  73. });
  74. //update:data : v-model表格data ,confirm : 获取此时表格data
  75. const emits = defineEmits(["update:data", "confirm"]);
  76. //新增默认表格data
  77. const resetdata = JSON.parse(resData);
  78. //展示名称
  79. const inName = ref("");
  80. //loading 变量
  81. const isMaskShow = ref(false);
  82. //表格初始化默认值
  83. const resetOb = ref({
  84. container: "luckysheet", // 设定DOM容器的id
  85. title: "Luckysheet Demo", // 设定表格名称
  86. lang: "zh", // 设定表格语言
  87. enableAddBackTop: true, //返回头部按钮
  88. userInfo: false, // 右上角的用户信息展示样式
  89. showinfobar: false, // 是否显示顶部信息栏
  90. showConfigWindowResize: true, // 自动缩进界面
  91. column: 30,
  92. row: 30,
  93. showsheetbar: false, // 是否显示底部sheet页按钮
  94. showsheetbarConfig: {
  95. add: false, //新增sheet
  96. menu: false, //sheet管理菜单
  97. sheet: false, //sheet页显示
  98. },
  99. cellRightClickConfig: {
  100. //右键单元格菜单设置
  101. copy: true, // 复制
  102. copyAs: true, // 复制为
  103. paste: true, // 粘贴
  104. insertRow: true, // 插入行
  105. insertColumn: true, // 插入列
  106. deleteRow: true, // 删除选中行
  107. deleteColumn: true, // 删除选中列
  108. deleteCell: true, // 删除单元格
  109. hideRow: true, // 隐藏选中行和显示选中行
  110. hideColumn: true, // 隐藏选中列和显示选中列
  111. rowHeight: true, // 行高
  112. columnWidth: true, // 列宽
  113. clear: true, // 清除内容
  114. matrix: true, // 矩阵操作选区
  115. sort: true, // 排序选区
  116. filter: true, // 筛选选区
  117. chart: true, // 图表生成
  118. image: true, // 插入图片
  119. link: true, // 插入链接
  120. data: true, // 数据验证
  121. cellFormat: true, // 设置单元格格式
  122. },
  123. data: null,
  124. });
  125. //设置第一个sheet
  126. const getActiveSheet = (sheets = []) => {
  127. let data = [];
  128. // 取激活项
  129. sheets.some((item) => {
  130. if (item.status === "1") {
  131. data.push(item);
  132. return true;
  133. }
  134. });
  135. // 没有激活项,取第一项
  136. if (data.length === 0) {
  137. data.push(sheets[0]);
  138. }
  139. return data;
  140. };
  141. //导入
  142. const leadingExcel = (item, fileList) => {
  143. const file = item.raw;
  144. console.log("file", file);
  145. if (file == null || file.name == "") {
  146. return;
  147. }
  148. let name = file.name;
  149. let suffixArr = name.split("."),
  150. suffix = suffixArr[suffixArr.length - 1];
  151. if (suffix != "xlsx") {
  152. ElMessage.error("请导入xlsx格式的文件");
  153. return;
  154. }
  155. LuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {
  156. if (exportJson.sheets == null || exportJson.sheets.length == 0) {
  157. ElMessage.error("请导入xlsx格式的文件");
  158. return;
  159. }
  160. window.luckysheet.destroy();
  161. const data = getActiveSheet(exportJson.sheets);
  162. resetOb.value.data = data;
  163. emits("update:data", data);
  164. inName.value = file.name;
  165. window.luckysheet.create(resetOb.value);
  166. });
  167. };
  168. //导出
  169. const downloadExcel = () => {
  170. exportExcel(luckysheet.getAllSheets(), "导出表格");
  171. };
  172. //获取此时表格数据
  173. const confirm = () => emits("confirm", luckysheet.getAllSheets());
  174. //销毁
  175. const reset = () => {
  176. luckysheet.destroy();
  177. };
  178. const getRangeAxis = () => {
  179. return luckysheet.getRangeAxis();
  180. };
  181. //保存当次cell数据
  182. const saveCellData = () => {
  183. const enter = () => {
  184. let event = new KeyboardEvent("keydown", {
  185. key: "Enter",
  186. code: "Enter",
  187. keyCode: 13,
  188. which: 13,
  189. shiftKey: false,
  190. ctrlKey: false,
  191. altKey: false,
  192. metaKey: false,
  193. bubbles: true,
  194. cancelable: true,
  195. });
  196. // 分发事件到document
  197. document.dispatchEvent(event);
  198. };
  199. enter();
  200. };
  201. //配置单元格校验
  202. const setVerification = () => {
  203. for (let i = 0; i < props.verifications.length; i++) {
  204. if (
  205. !props.verifications[i].checkStr ||
  206. props.verifications[i].checkStr === ""
  207. ) {
  208. } else {
  209. let option = {
  210. type: "number",
  211. type2: "bw",
  212. value1: JSON.parse(props.verifications[i].checkStr).down,
  213. value2: JSON.parse(props.verifications[i].checkStr).up,
  214. hintShow: true,
  215. hintText: `请输入${JSON.parse(props.verifications[i].checkStr).down}-${JSON.parse(props.verifications[i].checkStr).up}的数字`,
  216. };
  217. luckysheet.setDataVerification(
  218. { ...option },
  219. { range: props.verifications[i].position }
  220. );
  221. }
  222. }
  223. };
  224. defineExpose({ confirm, reset, saveCellData, getRangeAxis });
  225. onMounted(() => {
  226. if (props.data == null) {
  227. inName.value = "表格模版";
  228. resetOb.value.data = resetdata;
  229. } else {
  230. inName.value = props.option.inName;
  231. resetOb.value.data = props.data;
  232. }
  233. if (props.option.edit == false) {
  234. resetOb.value.allowEdit = false;
  235. }
  236. luckysheet.create(resetOb.value);
  237. });
  238. watch(
  239. () => props.verifications,
  240. () => {
  241. nextTick(() => {
  242. if (props.checkStatus == true && props.verifications.length > 0) {
  243. setVerification();
  244. }
  245. });
  246. },
  247. { immediate: true }
  248. );
  249. </script>
  250. <style lang="scss" scoped>
  251. .oprea {
  252. padding: 0 20px;
  253. width: 100%;
  254. height: 60px;
  255. .header {
  256. display: flex;
  257. align-items: center;
  258. justify-content: space-between;
  259. .in {
  260. display: inline-block;
  261. margin-top: 1px;
  262. }
  263. .btn {
  264. width: 80px;
  265. border-radius: 16px;
  266. height: 40px;
  267. font-size: 20px;
  268. margin: 0 10px;
  269. border: 2px dashed #000;
  270. font-weight: 500;
  271. display: flex;
  272. justify-content: center;
  273. align-items: center;
  274. }
  275. .info {
  276. width: 260px;
  277. }
  278. }
  279. }
  280. #luckysheet {
  281. margin: 0px;
  282. padding: 0px;
  283. position: absolute;
  284. width: 100%;
  285. left: 0px;
  286. top: 50px;
  287. bottom: 0px;
  288. }
  289. #uploadBtn {
  290. font-size: 16px;
  291. }
  292. #tip {
  293. position: absolute;
  294. z-index: 1000000;
  295. left: 0px;
  296. top: 0px;
  297. bottom: 0px;
  298. right: 0px;
  299. background: rgba(255, 255, 255, 0.8);
  300. text-align: center;
  301. font-size: 40px;
  302. align-items: center;
  303. justify-content: center;
  304. display: flex;
  305. }
  306. </style>