@qxs-bns/components 0.0.32 → 0.0.33

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 (103) hide show
  1. package/es/package.json.mjs +1 -1
  2. package/es/src/data-chart/src/components/bar.vue.mjs +1 -1
  3. package/es/src/data-chart/src/components/bar.vue.mjs.map +1 -1
  4. package/es/src/data-chart/src/components/line.vue2.mjs +1 -1
  5. package/es/src/data-chart/src/components/line.vue2.mjs.map +1 -1
  6. package/es/src/data-chart/src/components/pie.vue.mjs +1 -1
  7. package/es/src/data-chart/src/components/pie.vue.mjs.map +1 -1
  8. package/es/src/file-upload/src/file-upload.vue.mjs.map +1 -1
  9. package/es/src/photo-crop-tool/src/photo-crop-tool.vue.mjs +1 -1
  10. package/es/src/photo-crop-tool/src/photo-crop-tool.vue.mjs.map +1 -1
  11. package/es/src/subject-list/index.mjs.map +1 -1
  12. package/es/src/subject-list/src/components/subject-single.vue.mjs +1 -1
  13. package/es/src/subject-list/src/components/subject-single.vue.mjs.map +1 -1
  14. package/lib/package.json.cjs +1 -1
  15. package/lib/src/data-chart/src/components/bar.vue.cjs +1 -1
  16. package/lib/src/data-chart/src/components/bar.vue.cjs.map +1 -1
  17. package/lib/src/data-chart/src/components/line.vue2.cjs +1 -1
  18. package/lib/src/data-chart/src/components/line.vue2.cjs.map +1 -1
  19. package/lib/src/data-chart/src/components/pie.vue.cjs +1 -1
  20. package/lib/src/data-chart/src/components/pie.vue.cjs.map +1 -1
  21. package/lib/src/file-upload/src/file-upload.vue.cjs.map +1 -1
  22. package/lib/src/photo-crop-tool/src/photo-crop-tool.vue.cjs +1 -1
  23. package/lib/src/photo-crop-tool/src/photo-crop-tool.vue.cjs.map +1 -1
  24. package/lib/src/subject-list/index.cjs.map +1 -1
  25. package/lib/src/subject-list/src/components/subject-single.vue.cjs +1 -1
  26. package/lib/src/subject-list/src/components/subject-single.vue.cjs.map +1 -1
  27. package/package.json +1 -1
  28. package/theme-chalk/base.css +1 -1
  29. package/theme-chalk/index.css +1 -1
  30. package/types/src/data-chart/index.d.ts +17 -1
  31. package/types/src/data-chart/index.d.ts.map +1 -1
  32. package/types/src/data-chart/src/components/area.vue.d.ts +8 -0
  33. package/types/src/data-chart/src/components/area.vue.d.ts.map +1 -0
  34. package/types/src/data-chart/src/components/bar.vue.d.ts +9 -0
  35. package/types/src/data-chart/src/components/bar.vue.d.ts.map +1 -0
  36. package/types/src/data-chart/src/components/card.vue.d.ts +27 -0
  37. package/types/src/data-chart/src/components/card.vue.d.ts.map +1 -0
  38. package/types/src/data-chart/src/components/empty.vue.d.ts +11 -0
  39. package/types/src/data-chart/src/components/empty.vue.d.ts.map +1 -0
  40. package/types/src/data-chart/src/components/funnel.vue.d.ts +8 -0
  41. package/types/src/data-chart/src/components/funnel.vue.d.ts.map +1 -0
  42. package/types/src/data-chart/src/components/line.vue.d.ts +9 -0
  43. package/types/src/data-chart/src/components/line.vue.d.ts.map +1 -0
  44. package/types/src/data-chart/src/components/pie.vue.d.ts +9 -0
  45. package/types/src/data-chart/src/components/pie.vue.d.ts.map +1 -0
  46. package/types/src/data-chart/src/components/radar.vue.d.ts +8 -0
  47. package/types/src/data-chart/src/components/radar.vue.d.ts.map +1 -0
  48. package/types/src/data-chart/src/components/scatter-simple.vue.d.ts +8 -0
  49. package/types/src/data-chart/src/components/scatter-simple.vue.d.ts.map +1 -0
  50. package/types/src/data-chart/src/components/scatter.vue.d.ts +8 -0
  51. package/types/src/data-chart/src/components/scatter.vue.d.ts.map +1 -0
  52. package/types/src/data-chart/src/components/table.vue.d.ts +27 -0
  53. package/types/src/data-chart/src/components/table.vue.d.ts.map +1 -0
  54. package/types/src/data-chart/src/data-chart.vue.d.ts +16 -0
  55. package/types/src/data-chart/src/data-chart.vue.d.ts.map +1 -0
  56. package/types/src/file-upload/index.d.ts +27 -1
  57. package/types/src/file-upload/index.d.ts.map +1 -1
  58. package/types/src/file-upload/src/file-upload.vue.d.ts +20 -0
  59. package/types/src/file-upload/src/file-upload.vue.d.ts.map +1 -0
  60. package/types/src/fixed-action-bar/index.d.ts +53 -1
  61. package/types/src/fixed-action-bar/index.d.ts.map +1 -1
  62. package/types/src/fixed-action-bar/src/fixed-action-bar.vue.d.ts +31 -0
  63. package/types/src/fixed-action-bar/src/fixed-action-bar.vue.d.ts.map +1 -0
  64. package/types/src/image-upload/index.d.ts +44 -1
  65. package/types/src/image-upload/index.d.ts.map +1 -1
  66. package/types/src/image-upload/src/image-upload.vue.d.ts +34 -0
  67. package/types/src/image-upload/src/image-upload.vue.d.ts.map +1 -0
  68. package/types/src/photo-crop-tool/index.d.ts +52 -1
  69. package/types/src/photo-crop-tool/index.d.ts.map +1 -1
  70. package/types/src/photo-crop-tool/src/photo-crop-tool.vue.d.ts +65 -0
  71. package/types/src/photo-crop-tool/src/photo-crop-tool.vue.d.ts.map +1 -0
  72. package/types/src/subject-action/index.d.ts +85 -1
  73. package/types/src/subject-action/index.d.ts.map +1 -1
  74. package/types/src/subject-action/src/subject-action.vue.d.ts +87 -0
  75. package/types/src/subject-action/src/subject-action.vue.d.ts.map +1 -0
  76. package/types/src/subject-layout/index.d.ts +25 -1
  77. package/types/src/subject-layout/index.d.ts.map +1 -1
  78. package/types/src/subject-layout/src/subject-layout.vue.d.ts +42 -0
  79. package/types/src/subject-layout/src/subject-layout.vue.d.ts.map +1 -0
  80. package/types/src/subject-list/index.d.ts +18 -2
  81. package/types/src/subject-list/index.d.ts.map +1 -1
  82. package/types/src/subject-list/src/components/SubjectPageEnd.vue.d.ts +24 -0
  83. package/types/src/subject-list/src/components/SubjectPageEnd.vue.d.ts.map +1 -0
  84. package/types/src/subject-list/src/components/SubjectRichText.vue.d.ts +25 -0
  85. package/types/src/subject-list/src/components/SubjectRichText.vue.d.ts.map +1 -0
  86. package/types/src/subject-list/src/components/subject-blank-fill.vue.d.ts +32 -0
  87. package/types/src/subject-list/src/components/subject-blank-fill.vue.d.ts.map +1 -0
  88. package/types/src/subject-list/src/components/subject-scale.vue.d.ts +29 -0
  89. package/types/src/subject-list/src/components/subject-scale.vue.d.ts.map +1 -0
  90. package/types/src/subject-list/src/components/subject-single.vue.d.ts +37 -0
  91. package/types/src/subject-list/src/components/subject-single.vue.d.ts.map +1 -0
  92. package/types/src/subject-list/src/components/subject-text-fill.vue.d.ts +34 -0
  93. package/types/src/subject-list/src/components/subject-text-fill.vue.d.ts.map +1 -0
  94. package/types/src/subject-list/src/subject-list.vue.d.ts +21 -0
  95. package/types/src/subject-list/src/subject-list.vue.d.ts.map +1 -0
  96. package/types/src/subject-type/index.d.ts +5 -1
  97. package/types/src/subject-type/index.d.ts.map +1 -1
  98. package/types/src/subject-type/src/subject-type.vue.d.ts +7 -0
  99. package/types/src/subject-type/src/subject-type.vue.d.ts.map +1 -0
  100. package/types/src/tiny-mce-editor/index.d.ts +17 -1
  101. package/types/src/tiny-mce-editor/index.d.ts.map +1 -1
  102. package/types/src/tiny-mce-editor/src/tiny-mce-editor.vue.d.ts +32 -0
  103. package/types/src/tiny-mce-editor/src/tiny-mce-editor.vue.d.ts.map +1 -0
@@ -1,2 +1,2 @@
1
- "use strict";exports.version="0.0.32";
1
+ "use strict";exports.version="0.0.33";
2
2
  //# sourceMappingURL=package.json.cjs.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),a=require("lodash-es"),t=require("../utils/injectionKeys.cjs"),s=require("../utils/useCharts.cjs"),r=e.defineComponent({name:"DataChartBar",__name:"bar",props:{chartData:{type:Object,required:!0,default:()=>({colDesc:[],xGroupByDesc:{colDesc:"",groupByDesc:"",groupByValues:[],xAxis:!1},groupByDesc:[],data:[],modelName:""})},subShowType:{type:String,required:!0,default:"bar-simple"},chartOptions:{type:null,required:!0}},setup(r){const c=e.inject(t.InjectionChartMerge,(e=>e),!0),o=e.ref(null),l=e.computed((()=>{const{colDesc:e,xGroupByDesc:t,groupByDesc:s,data:o=[],modelName:l}=r.chartData,i=Array.from(new Set(o.map((e=>e[t.colDesc||""]))))||[],u=s.find((e=>!e.xAxis))||{groupByValues:[],colDesc:""};u.groupByValues=a.uniq(o.map((e=>u.colDesc?String(e[u.colDesc]):""))),t&&t.groupByValues&&(t.groupByValues=a.uniq(o.map((e=>t.colDesc?String(e[t.colDesc]):""))));const n={title:{text:l},xAxis:{name:"",type:"category",axisLabel:{interval:0,formatter:e=>e.length>5?`${e.substring(0,5)}...`:e},data:i},yAxis:{type:"value"},legend:{data:[]},dataZoom:[{type:"inside",disabled:i.length<15}]};if(1===s.length)n.series=e.map((e=>({name:e,data:o.map((a=>a[e])),type:"bar",emphasis:{focus:"series"},label:{show:!0,position:"inside"}}))),n.legend.data=e;else if(2===s.length){const a=e.map((e=>u.groupByValues?.map((a=>{const s={name:`${a||"/"}-${e}`,type:"bar",stack:e,emphasis:{focus:"series"},data:[],label:{show:!0,position:"inside"}};return s.data=(t.groupByValues||[]).map((e=>{let r=null;return o.forEach((c=>{u.colDesc&&c[u.colDesc]===a&&t.colDesc&&c[t.colDesc]===e&&s.stack&&(r=c[s.stack]??null)})),r||""})).filter((e=>""!==e)),s}))||[])).flat();n.series=a,delete n.legend}function p(e,a,t,s){Array.isArray(e)?e.forEach((e=>{e&&(e.type=a,"category"===a&&(e.data=t||[],e.name=s||""))})):e&&(e.type=a,"category"===a&&(e.data=t||[],e.name=s||""))}switch(r.subShowType){case"bar-simple":case"default":p(n.xAxis,"category",i,t.colDesc||""),p(n.yAxis,"value");break;case"bar-y-category":p(n.xAxis,"value"),p(n.yAxis,"category",i,t.colDesc||"")}return c(n,r.chartOptions)}));return s.useCharts({chartDOM:o,chartOptions:l,chartData:e.computed((()=>r.chartData))}),(a,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartBar",ref:o,class:"data-chart-bar"},null,512))}});exports.default=r;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),a=require("lodash-es"),t=require("../utils/injectionKeys.cjs"),s=require("../utils/useCharts.cjs"),r=e.defineComponent({name:"DataChartBar",__name:"bar",props:{chartData:{type:Object,required:!0,default:()=>({colDesc:[],xGroupByDesc:{colDesc:"",groupByDesc:"",groupByValues:[],xAxis:!1},groupByDesc:[],data:[],modelName:""})},subShowType:{type:String,required:!0,default:"bar-simple"},chartOptions:{type:null,required:!0}},setup(r){const c=e.inject(t.InjectionChartMerge,(e=>e),!0),l=e.ref(null),o=e.computed((()=>{const{colDesc:e,xGroupByDesc:t,groupByDesc:s,data:l=[],modelName:o}=r.chartData,i=Array.from(new Set(l.map((e=>e[t.colDesc||""])))).filter((e=>null!=e))||[],u=s.find((e=>!e.xAxis))||{groupByValues:[],colDesc:""};u.groupByValues=a.uniq(l.map((e=>u.colDesc?String(e[u.colDesc]):""))),t&&t.groupByValues&&(t.groupByValues=a.uniq(l.map((e=>t.colDesc?String(e[t.colDesc]):""))));const n={title:{text:o},xAxis:{name:"",type:"category",axisLabel:{interval:0,formatter:e=>e.length>5?`${e.substring(0,5)}...`:e},data:i},yAxis:{type:"value"},legend:{data:[]},dataZoom:[{type:"inside",disabled:i.length<15}]};if(1===s.length)n.series=e.map((e=>({name:e,data:l.map((a=>a[e])),type:"bar",emphasis:{focus:"series"},label:{show:!0,position:"inside"}}))),n.legend.data=e;else if(2===s.length){const a=e.map((e=>u.groupByValues?.map((a=>{const s={name:`${a||"/"}-${e}`,type:"bar",stack:e,emphasis:{focus:"series"},data:[],label:{show:!0,position:"inside"}};return s.data=(t.groupByValues||[]).map((e=>{let r=null;return l.forEach((c=>{u.colDesc&&c[u.colDesc]===a&&t.colDesc&&c[t.colDesc]===e&&s.stack&&(r=c[s.stack]??null)})),r||""})).filter((e=>""!==e)),s}))||[])).flat();n.series=a,delete n.legend}function p(e,a,t,s){Array.isArray(e)?e.forEach((e=>{e&&(e.type=a,"category"===a&&(e.data=t||[],e.name=s||""))})):e&&(e.type=a,"category"===a&&(e.data=t||[],e.name=s||""))}switch(r.subShowType){case"bar-simple":case"default":p(n.xAxis,"category",i,t.colDesc||""),p(n.yAxis,"value");break;case"bar-y-category":p(n.xAxis,"value"),p(n.yAxis,"category",i,t.colDesc||"")}return c(n,r.chartOptions)}));return s.useCharts({chartDOM:l,chartOptions:o,chartData:e.computed((()=>r.chartData))}),(a,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartBar",ref:l,class:"data-chart-bar"},null,512))}});exports.default=r;
2
2
  //# sourceMappingURL=bar.vue.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"bar.vue.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/bar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { LegendComponentOption, XAXisComponentOption, YAXisComponentOption } from 'echarts'\nimport type {\n EChartData,\n EChartsOption,\n IFormatPublicData,\n SeriesOption,\n} from '../types'\nimport { uniq } from 'lodash-es'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\n// 定义组件名称\ndefineOptions({\n name: 'DataChartBar',\n})\n\n// 定义组件属性\nconst {\n chartOptions,\n chartData = {\n colDesc: [],\n xGroupByDesc: {\n colDesc: '',\n groupByDesc: '',\n groupByValues: [],\n xAxis: false,\n },\n groupByDesc: [],\n data: [],\n modelName: '',\n },\n subShowType = 'bar-simple',\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n}>()\n\n// 注入合并函数,并明确类型\nconst merge = inject(InjectionChartMerge, (v: any) => v, true) as (config: EChartsOption, chartOptions: EChartsOption) => EChartsOption\nconst dataChartBar = ref<HTMLElement | null>(null)\n\n// 计算图表选项\nconst barChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, groupByDesc, data = [], modelName } = chartData\n\n const axisData = Array.from(new Set(data.map(item => item[xGroupByDesc.colDesc || '']))) || []\n const yGroupByDesc: EChartData['desc']['groupByDesc'][0] = groupByDesc.find(item => !item.xAxis) || {\n groupByDesc: null,\n groupByValues: [],\n colDesc: '',\n xAxis: false,\n }\n\n yGroupByDesc.groupByValues = uniq(data.map(item => yGroupByDesc.colDesc ? String(item[yGroupByDesc.colDesc]) : ''))\n if (xGroupByDesc && xGroupByDesc.groupByValues) {\n xGroupByDesc.groupByValues = uniq(data.map(item => xGroupByDesc.colDesc ? String(item[xGroupByDesc.colDesc]) : ''))\n }\n\n const config: EChartsOption = {\n title: {\n text: modelName,\n },\n xAxis: {\n name: '',\n type: 'category',\n axisLabel: {\n interval: 0, // 强制显示所有标签\n formatter(value: string) {\n const screenshotLength = 5\n return value.length > screenshotLength ? `${value.substring(0, screenshotLength)}...` : value // 截取前5个字符并添加省略号\n },\n },\n data: axisData,\n },\n yAxis: {\n type: 'value',\n },\n legend: {\n data: [],\n },\n dataZoom: [{\n type: 'inside',\n disabled: axisData.length < 15,\n }],\n }\n\n // 堆叠图\n if (groupByDesc.length === 1) {\n config.series = colDesc.map((yItem) => {\n return {\n name: yItem,\n data: data.map(item => item[yItem]),\n type: 'bar',\n emphasis: {\n focus: 'series',\n },\n label: {\n show: true,\n position: 'inside',\n },\n }\n });\n (config.legend as LegendComponentOption).data = colDesc\n }\n else if (groupByDesc.length === 2) {\n const arr = colDesc.map((colDescItem) => {\n return yGroupByDesc.groupByValues?.map((yGroupByDescItem) => {\n const obj: SeriesOption = {\n name: `${yGroupByDescItem || '/'}-${colDescItem}`,\n type: 'bar',\n stack: colDescItem,\n emphasis: {\n focus: 'series',\n },\n data: [],\n label: {\n show: true,\n position: 'inside',\n },\n }\n obj.data = (xGroupByDesc.groupByValues || []).map((xGroupByDescItem) => {\n let targetVal: number | string | null = null\n data.forEach((item) => {\n if (yGroupByDesc.colDesc && item[yGroupByDesc.colDesc] === yGroupByDescItem && xGroupByDesc.colDesc && item[xGroupByDesc.colDesc] === xGroupByDescItem) {\n if (obj.stack) {\n targetVal = item[obj.stack] ?? null\n }\n }\n })\n return targetVal || ''\n }).filter(v => v !== '')\n return obj\n }) || []\n }).flat()\n\n config.series = arr\n delete config.legend\n }\n\n // 1. 定义轴类型\n type CategoryAxisOption = XAXisComponentOption & {\n type: 'category'\n data: (string | number)[]\n }\n\n // 2. 创建配置轴的辅助函数\n function configureAxis(\n axis: XAXisComponentOption | XAXisComponentOption[] | YAXisComponentOption | YAXisComponentOption[] | undefined,\n type: 'category' | 'value',\n data?: (string | number)[],\n name?: string,\n ) {\n if (Array.isArray(axis)) {\n axis.forEach((item) => {\n if (item) {\n item.type = type\n if (type === 'category') {\n (item as CategoryAxisOption).data = data || []\n item.name = name || ''\n }\n }\n })\n }\n else if (axis) {\n axis.type = type\n if (type === 'category') {\n (axis as CategoryAxisOption).data = data || []\n axis.name = name || ''\n }\n }\n }\n\n // 3. 使用配置函数\n switch (subShowType) {\n case 'bar-simple':\n case 'default':\n configureAxis(config.xAxis, 'category', axisData, xGroupByDesc.colDesc || '')\n configureAxis(config.yAxis, 'value')\n break\n\n case 'bar-y-category':\n configureAxis(config.xAxis, 'value')\n configureAxis(config.yAxis, 'category', axisData, xGroupByDesc.colDesc || '')\n break\n }\n\n return merge(config, chartOptions)\n})\n\nuseCharts({ chartDOM: dataChartBar, chartOptions: barChartOptions, chartData: computed(() => chartData) })\n</script>\n\n<template>\n <div ref=\"dataChartBar\" class=\"data-chart-bar\" />\n</template>\n"],"names":["merge","inject","InjectionChartMerge","v","dataChartBar","ref","barChartOptions","computed","colDesc","xGroupByDesc","groupByDesc","data","modelName","__props","chartData","axisData","Array","from","Set","map","item","yGroupByDesc","find","xAxis","groupByValues","uniq","String","config","title","text","name","type","axisLabel","interval","formatter","value","length","substring","yAxis","legend","dataZoom","disabled","series","yItem","emphasis","focus","label","show","position","arr","colDescItem","yGroupByDescItem","obj","stack","xGroupByDescItem","targetVal","forEach","filter","flat","configureAxis","axis","isArray","subShowType","chartOptions","useCharts","chartDOM"],"mappings":"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"}
1
+ {"version":3,"file":"bar.vue.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/bar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { LegendComponentOption, XAXisComponentOption, YAXisComponentOption } from 'echarts'\nimport type {\n EChartData,\n EChartsOption,\n IFormatPublicData,\n SeriesOption,\n} from '../types'\nimport { uniq } from 'lodash-es'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\n// 定义组件名称\ndefineOptions({\n name: 'DataChartBar',\n})\n\n// 定义组件属性\nconst {\n chartOptions,\n chartData = {\n colDesc: [],\n xGroupByDesc: {\n colDesc: '',\n groupByDesc: '',\n groupByValues: [],\n xAxis: false,\n },\n groupByDesc: [],\n data: [],\n modelName: '',\n },\n subShowType = 'bar-simple',\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n}>()\n\n// 注入合并函数,并明确类型\nconst merge = inject(InjectionChartMerge, (v: any) => v, true) as (config: EChartsOption, chartOptions: EChartsOption) => EChartsOption\nconst dataChartBar = ref<HTMLElement | null>(null)\n\n// 计算图表选项\nconst barChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, groupByDesc, data = [], modelName } = chartData\n\n const axisData = Array.from(new Set(data.map(item => item[xGroupByDesc.colDesc || '']))).filter(item => item !== undefined && item !== null) || []\n const yGroupByDesc: EChartData['desc']['groupByDesc'][0] = groupByDesc.find(item => !item.xAxis) || {\n groupByDesc: null,\n groupByValues: [],\n colDesc: '',\n xAxis: false,\n }\n\n yGroupByDesc.groupByValues = uniq(data.map(item => yGroupByDesc.colDesc ? String(item[yGroupByDesc.colDesc]) : ''))\n if (xGroupByDesc && xGroupByDesc.groupByValues) {\n xGroupByDesc.groupByValues = uniq(data.map(item => xGroupByDesc.colDesc ? String(item[xGroupByDesc.colDesc]) : ''))\n }\n\n const config: EChartsOption = {\n title: {\n text: modelName,\n },\n xAxis: {\n name: '',\n type: 'category',\n axisLabel: {\n interval: 0, // 强制显示所有标签\n formatter(value: string) {\n const screenshotLength = 5\n return value.length > screenshotLength ? `${value.substring(0, screenshotLength)}...` : value // 截取前5个字符并添加省略号\n },\n },\n data: axisData,\n },\n yAxis: {\n type: 'value',\n },\n legend: {\n data: [],\n },\n dataZoom: [{\n type: 'inside',\n disabled: axisData.length < 15,\n }],\n }\n\n // 堆叠图\n if (groupByDesc.length === 1) {\n config.series = colDesc.map((yItem) => {\n return {\n name: yItem,\n data: data.map(item => item[yItem]),\n type: 'bar',\n emphasis: {\n focus: 'series',\n },\n label: {\n show: true,\n position: 'inside',\n },\n }\n });\n (config.legend as LegendComponentOption).data = colDesc\n }\n else if (groupByDesc.length === 2) {\n const arr = colDesc.map((colDescItem) => {\n return yGroupByDesc.groupByValues?.map((yGroupByDescItem) => {\n const obj: SeriesOption = {\n name: `${yGroupByDescItem || '/'}-${colDescItem}`,\n type: 'bar',\n stack: colDescItem,\n emphasis: {\n focus: 'series',\n },\n data: [],\n label: {\n show: true,\n position: 'inside',\n },\n }\n obj.data = (xGroupByDesc.groupByValues || []).map((xGroupByDescItem) => {\n let targetVal: number | string | null = null\n data.forEach((item) => {\n if (yGroupByDesc.colDesc && item[yGroupByDesc.colDesc] === yGroupByDescItem && xGroupByDesc.colDesc && item[xGroupByDesc.colDesc] === xGroupByDescItem) {\n if (obj.stack) {\n targetVal = item[obj.stack] ?? null\n }\n }\n })\n return targetVal || ''\n }).filter(v => v !== '')\n return obj\n }) || []\n }).flat()\n\n config.series = arr\n delete config.legend\n }\n\n // 1. 定义轴类型\n type CategoryAxisOption = XAXisComponentOption & {\n type: 'category'\n data: (string | number)[]\n }\n\n // 2. 创建配置轴的辅助函数\n function configureAxis(\n axis: XAXisComponentOption | XAXisComponentOption[] | YAXisComponentOption | YAXisComponentOption[] | undefined,\n type: 'category' | 'value',\n data?: (string | number)[],\n name?: string,\n ) {\n if (Array.isArray(axis)) {\n axis.forEach((item) => {\n if (item) {\n item.type = type\n if (type === 'category') {\n (item as CategoryAxisOption).data = data || []\n item.name = name || ''\n }\n }\n })\n }\n else if (axis) {\n axis.type = type\n if (type === 'category') {\n (axis as CategoryAxisOption).data = data || []\n axis.name = name || ''\n }\n }\n }\n\n // 3. 使用配置函数\n switch (subShowType) {\n case 'bar-simple':\n case 'default':\n configureAxis(config.xAxis, 'category', axisData, xGroupByDesc.colDesc || '')\n configureAxis(config.yAxis, 'value')\n break\n\n case 'bar-y-category':\n configureAxis(config.xAxis, 'value')\n configureAxis(config.yAxis, 'category', axisData, xGroupByDesc.colDesc || '')\n break\n }\n\n return merge(config, chartOptions)\n})\n\nuseCharts({ chartDOM: dataChartBar, chartOptions: barChartOptions, chartData: computed(() => chartData) })\n</script>\n\n<template>\n <div ref=\"dataChartBar\" class=\"data-chart-bar\" />\n</template>\n"],"names":["merge","inject","InjectionChartMerge","v","dataChartBar","ref","barChartOptions","computed","colDesc","xGroupByDesc","groupByDesc","data","modelName","__props","chartData","axisData","Array","from","Set","map","item","filter","yGroupByDesc","find","xAxis","groupByValues","uniq","String","config","title","text","name","type","axisLabel","interval","formatter","value","length","substring","yAxis","legend","dataZoom","disabled","series","yItem","emphasis","focus","label","show","position","arr","colDescItem","yGroupByDescItem","obj","stack","xGroupByDescItem","targetVal","forEach","flat","configureAxis","axis","isArray","subShowType","chartOptions","useCharts","chartDOM"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("../utils/injectionKeys.cjs"),a=require("../utils/useCharts.cjs"),r=e.defineComponent({name:"DataChartLine",__name:"line",props:{chartData:{type:Object,required:!0,default:()=>({colDesc:[],xGroupByDesc:{colDesc:"",groupByDesc:"",groupByValues:[],xAxis:!1},groupByDesc:[],data:[],modelName:""})},subShowType:{type:String,required:!0,default:"line-simple"},chartOptions:{type:null,required:!0}},setup(r){const s=e.ref(),c=e.inject(t.InjectionChartMerge,(e=>e),!0),n=15,i="Total";const l=e.computed((()=>{const{colDesc:e,xGroupByDesc:t,groupByDesc:a,data:s,modelName:l}=r.chartData,o=Array.from(new Set(s?.map((e=>e[t?.colDesc||""]))))||[],u=a?.find((e=>!e.xAxis)),p={title:{text:l},legend:{data:[]},xAxis:{name:t?.colDesc||"",data:o},dataZoom:[{type:"inside",disabled:o.length<n}]};if(1===a?.length)p.series=e.map((e=>({name:e,type:"line",data:s.map((t=>t[e]))}))),p.legend.data=e;else if(2===a?.length){const a=[...new Set(s.map((e=>String(e[u?.colDesc||""]))))];p.legend.data=a,p.series=a.map((a=>function(e,t,a,r,s,c){const n=[];return t.forEach((t=>{const i=a.find((a=>a[r?.colDesc]===t&&a[s?.colDesc]===e));i?n.push(i[c[0]]):n.push(0)})),{name:e,type:"line",stack:i,areaStyle:{},data:n}}(a,o,s,t,u,e)))}return p.series=p.series?.map((e=>{const t={...e};switch(r.subShowType){case"line-simple":default:delete t.areaStyle;break;case"area-basic":t.areaStyle={}}return t})),c(p,r.chartOptions)}));return a.useCharts({chartDOM:s,chartOptions:l,chartData:e.computed((()=>r.chartData))}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartLine",ref:s,class:"data-chart-line"},null,512))}});exports.default=r;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("../utils/injectionKeys.cjs"),a=require("../utils/useCharts.cjs"),r=e.defineComponent({name:"DataChartLine",__name:"line",props:{chartData:{type:Object,required:!0,default:()=>({colDesc:[],xGroupByDesc:{colDesc:"",groupByDesc:"",groupByValues:[],xAxis:!1},groupByDesc:[],data:[],modelName:""})},subShowType:{type:String,required:!0,default:"line-simple"},chartOptions:{type:null,required:!0}},setup(r){const s=e.ref(),c=e.inject(t.InjectionChartMerge,(e=>e),!0),n=15,l="Total";const i=e.computed((()=>{const{colDesc:e,xGroupByDesc:t,groupByDesc:a,data:s,modelName:i}=r.chartData,o=Array.from(new Set(s?.map((e=>e[t?.colDesc||""])))).filter((e=>null!=e))||[],u=a?.find((e=>!e.xAxis)),p={title:{text:i},legend:{data:[]},xAxis:{name:t?.colDesc||"",data:o},dataZoom:[{type:"inside",disabled:o.length<n}]};if(1===a?.length)p.series=e.map((e=>({name:e,type:"line",data:s.map((t=>t[e])).filter((e=>null!=e))}))),p.legend.data=e;else if(2===a?.length){const a=[...new Set(s.map((e=>String(e[u?.colDesc||""]))))];p.legend.data=a,p.series=a.map((a=>function(e,t,a,r,s,c){const n=[];return t.forEach((t=>{const l=a.find((a=>a[r?.colDesc]===t&&a[s?.colDesc]===e));l?n.push(l[c[0]]):n.push(0)})),{name:e,type:"line",stack:l,areaStyle:{},data:n}}(a,o,s,t,u,e)))}return p.series=p.series?.map((e=>{const t={...e};switch(r.subShowType){case"line-simple":default:delete t.areaStyle;break;case"area-basic":t.areaStyle={}}return t})),c(p,r.chartOptions)}));return a.useCharts({chartDOM:s,chartOptions:i,chartData:e.computed((()=>r.chartData))}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartLine",ref:s,class:"data-chart-line"},null,512))}});exports.default=r;
2
2
  //# sourceMappingURL=line.vue2.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"line.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/line.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { LegendComponentOption } from 'echarts'\nimport type { EChartsOption, IFormatPublicData } from '../types'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartLine',\n})\nconst {\n chartData = {\n colDesc: [],\n xGroupByDesc: {\n colDesc: '',\n groupByDesc: '',\n groupByValues: [],\n xAxis: false,\n },\n groupByDesc: [],\n data: [],\n modelName: '',\n },\n subShowType = 'line-simple',\n chartOptions,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n}>()\nconst dataChartLine = ref()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\n// 抽取类型定义\ninterface SeriesItem {\n name: string\n type: 'line'\n stack?: string\n areaStyle?: Record<string, any>\n data: Array<string | number>\n}\n\n// 将配置提取为常量\nconst CHART_CONSTANTS = {\n MIN_ZOOM_LENGTH: 15,\n STACK_NAME: 'Total',\n} as const\n\n// 提取处理图表系列数据的函数\nfunction processSeriesData(legendDataItem: string,\n xAxisData: (string | number)[],\n data: any[],\n xGroupByDesc: any,\n yGroupByDesc: any,\n colDesc: string[]): SeriesItem {\n const seriesData: (string | number)[] = []\n\n xAxisData.forEach((xAxisItem) => {\n const targetData = data\n .find(dataItem =>\n dataItem[xGroupByDesc?.colDesc] === xAxisItem\n && dataItem[yGroupByDesc?.colDesc] === legendDataItem,\n )\n\n if (targetData) {\n seriesData.push(targetData[colDesc[0]])\n }\n else {\n seriesData.push(0) // 或者其他默认值\n }\n })\n\n return {\n name: legendDataItem,\n type: 'line',\n stack: CHART_CONSTANTS.STACK_NAME,\n areaStyle: {},\n data: seriesData,\n }\n}\n\nconst lineChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, groupByDesc, data, modelName } = chartData\n const xAxisData = Array.from(new Set(data?.map(item => item[xGroupByDesc?.colDesc || '']))) || []\n const yGroupByDesc = groupByDesc?.find(item => !item.xAxis)\n\n const config: EChartsOption & { series?: SeriesItem[] } = {\n title: { text: modelName },\n legend: { data: [] },\n xAxis: {\n name: xGroupByDesc?.colDesc || '',\n data: xAxisData,\n },\n dataZoom: [{\n type: 'inside',\n disabled: xAxisData.length < CHART_CONSTANTS.MIN_ZOOM_LENGTH,\n }],\n }\n\n // 处理系列数据\n if (groupByDesc?.length === 1) {\n config.series = colDesc.map(yItem => ({\n name: yItem,\n type: 'line',\n data: data.map(item => item[yItem]),\n }));\n (config.legend as LegendComponentOption).data = colDesc\n }\n else if (groupByDesc?.length === 2) {\n const legendData = [...new Set(data.map(item => String(item[yGroupByDesc?.colDesc || ''])))]\n ;(config.legend as LegendComponentOption).data = legendData\n\n config.series = legendData.map(legendDataItem =>\n processSeriesData(legendDataItem, xAxisData, data, xGroupByDesc, yGroupByDesc, colDesc),\n )\n }\n\n // 处理图表展示类型\n config.series = config.series?.map((item) => {\n const seriesItem = { ...item }\n\n switch (subShowType) {\n case 'line-simple':\n delete seriesItem.areaStyle\n break\n case 'area-basic':\n seriesItem.areaStyle = {}\n break\n default:\n delete seriesItem.areaStyle\n }\n\n return seriesItem\n })\n\n return merge(config, chartOptions)\n})\nuseCharts({ chartDOM: dataChartLine, chartOptions: lineChartOptions, chartData: computed(() => chartData) })\n</script>\n\n<template>\n <div ref=\"dataChartLine\" class=\"data-chart-line\" />\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-line {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["dataChartLine","ref","merge","inject","InjectionChartMerge","v","CHART_CONSTANTS","lineChartOptions","computed","colDesc","xGroupByDesc","groupByDesc","data","modelName","__props","chartData","xAxisData","Array","from","Set","map","item","yGroupByDesc","find","xAxis","config","title","text","legend","name","dataZoom","type","disabled","length","series","yItem","legendData","String","legendDataItem","seriesData","forEach","xAxisItem","targetData","dataItem","push","stack","areaStyle","processSeriesData","seriesItem","subShowType","chartOptions","useCharts","chartDOM"],"mappings":"qfA6BA,MAAMA,EAAgBC,EAAAA,MAChBC,EAAQC,EAAAA,OAAOC,EAAAA,qBAAsBC,GAAWA,IAAG,GAYnDC,EACa,GADbA,EAEQ,QAoCR,MAAAC,EAAmBC,EAAAA,UAAwB,KAC/C,MAAMC,QAAEA,EAASC,aAAAA,EAAAC,YAAcA,OAAaC,EAAMC,UAAAA,GAAcC,EAAAC,UAC1DC,EAAYC,MAAMC,KAAK,IAAIC,IAAIP,GAAMQ,KAAIC,GAAQA,EAAKX,GAAcD,SAAW,SAAU,GACzFa,EAAeX,GAAaY,MAAaF,IAACA,EAAKG,QAE/CC,EAAoD,CACxDC,MAAO,CAAEC,KAAMd,GACfe,OAAQ,CAAEhB,KAAM,IAChBY,MAAO,CACLK,KAAMnB,GAAcD,SAAW,GAC/BG,KAAMI,GAERc,SAAU,CAAC,CACTC,KAAM,SACNC,SAAUhB,EAAUiB,OAAS3B,KAK7B,GAAwB,IAAxBK,GAAasB,OACRR,EAAAS,OAASzB,EAAQW,KAAce,IAAA,CACpCN,KAAMM,EACNJ,KAAM,OACNnB,KAAMA,EAAKQ,KAAYC,GAAAA,EAAKc,SAE7BV,EAAOG,OAAiChB,KAAOH,OAClD,GACiC,IAAxBE,GAAasB,OAAc,CAClC,MAAMG,EAAa,IAAI,IAAIjB,IAAIP,EAAKQ,KAAIC,GAAQgB,OAAOhB,EAAKC,GAAcb,SAAW,SACnFgB,EAAOG,OAAiChB,KAAOwB,EAEjDX,EAAOS,OAASE,EAAWhB,QA/D/B,SAA2BkB,EACzBtB,EACAJ,EACAF,EACAY,EACAb,GACA,MAAM8B,EAAkC,GAiBjC,OAfGvB,EAAAwB,SAASC,IACjB,MAAMC,EAAa9B,EAChBW,MAAKoB,GACJA,EAASjC,GAAcD,WAAagC,GACjCE,EAASrB,GAAcb,WAAa6B,IAGvCI,EACFH,EAAWK,KAAKF,EAAWjC,EAAQ,KAGnC8B,EAAWK,KAAK,EAAC,IAId,CACLf,KAAMS,EACNP,KAAM,OACNc,MAAOvC,EACPwC,UAAW,CAAC,EACZlC,KAAM2B,EACR,CAmCIQ,CAAkBT,EAAgBtB,EAAWJ,EAAMF,EAAcY,EAAcb,IACjF,CAqBK,OAjBPgB,EAAOS,OAAST,EAAOS,QAAQd,KAAKC,IAC5B,MAAA2B,EAAa,IAAK3B,GAExB,OAAQP,EAAAmC,aACN,IAAK,cAML,eACSD,EAAWF,gBAJpB,IAAK,aACHE,EAAWF,UAAY,CAAC,EAMrB,OAAAE,CAAA,IAGF9C,EAAMuB,EAAQX,EAAYoC,aAAA,WAEzBC,EAAAA,UAAA,CAAEC,SAAUpD,EAAekD,aAAc3C,EAAkBQ,UAAWP,YAAS,IAAMM,EAAAC"}
1
+ {"version":3,"file":"line.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/line.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { LegendComponentOption } from 'echarts'\nimport type { EChartsOption, IFormatPublicData } from '../types'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartLine',\n})\nconst {\n chartData = {\n colDesc: [],\n xGroupByDesc: {\n colDesc: '',\n groupByDesc: '',\n groupByValues: [],\n xAxis: false,\n },\n groupByDesc: [],\n data: [],\n modelName: '',\n },\n subShowType = 'line-simple',\n chartOptions,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n}>()\nconst dataChartLine = ref()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\n// 抽取类型定义\ninterface SeriesItem {\n name: string\n type: 'line'\n stack?: string\n areaStyle?: Record<string, any>\n data: Array<string | number>\n}\n\n// 将配置提取为常量\nconst CHART_CONSTANTS = {\n MIN_ZOOM_LENGTH: 15,\n STACK_NAME: 'Total',\n} as const\n\n// 提取处理图表系列数据的函数\nfunction processSeriesData(legendDataItem: string,\n xAxisData: (string | number)[],\n data: any[],\n xGroupByDesc: any,\n yGroupByDesc: any,\n colDesc: string[]): SeriesItem {\n const seriesData: (string | number)[] = []\n\n xAxisData.forEach((xAxisItem) => {\n const targetData = data\n .find(dataItem =>\n dataItem[xGroupByDesc?.colDesc] === xAxisItem\n && dataItem[yGroupByDesc?.colDesc] === legendDataItem,\n )\n\n if (targetData) {\n seriesData.push(targetData[colDesc[0]])\n }\n else {\n seriesData.push(0) // 或者其他默认值\n }\n })\n\n return {\n name: legendDataItem,\n type: 'line',\n stack: CHART_CONSTANTS.STACK_NAME,\n areaStyle: {},\n data: seriesData,\n }\n}\n\nconst lineChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, groupByDesc, data, modelName } = chartData\n const xAxisData = Array.from(new Set(data?.map(item => item[xGroupByDesc?.colDesc || '']))).filter(item => item !== undefined && item !== null ) || []\n const yGroupByDesc = groupByDesc?.find(item => !item.xAxis)\n\n const config: EChartsOption & { series?: SeriesItem[] } = {\n title: { text: modelName },\n legend: { data: [] },\n xAxis: {\n name: xGroupByDesc?.colDesc || '',\n data: xAxisData,\n },\n dataZoom: [{\n type: 'inside',\n disabled: xAxisData.length < CHART_CONSTANTS.MIN_ZOOM_LENGTH,\n }],\n }\n\n // 处理系列数据\n if (groupByDesc?.length === 1) {\n config.series = colDesc.map(yItem => ({\n name: yItem,\n type: 'line',\n data: data.map(item => item[yItem]).filter(item => item !== undefined && item !== null),\n }));\n (config.legend as LegendComponentOption).data = colDesc\n }\n else if (groupByDesc?.length === 2) {\n const legendData = [...new Set(data.map(item => String(item[yGroupByDesc?.colDesc || ''])))]\n ;(config.legend as LegendComponentOption).data = legendData\n\n config.series = legendData.map(legendDataItem =>\n processSeriesData(legendDataItem, xAxisData, data, xGroupByDesc, yGroupByDesc, colDesc),\n )\n }\n\n // 处理图表展示类型\n config.series = config.series?.map((item) => {\n const seriesItem = { ...item }\n\n switch (subShowType) {\n case 'line-simple':\n delete seriesItem.areaStyle\n break\n case 'area-basic':\n seriesItem.areaStyle = {}\n break\n default:\n delete seriesItem.areaStyle\n }\n\n return seriesItem\n })\n\n return merge(config, chartOptions)\n})\nuseCharts({ chartDOM: dataChartLine, chartOptions: lineChartOptions, chartData: computed(() => chartData) })\n</script>\n\n<template>\n <div ref=\"dataChartLine\" class=\"data-chart-line\" />\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-line {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["dataChartLine","ref","merge","inject","InjectionChartMerge","v","CHART_CONSTANTS","lineChartOptions","computed","colDesc","xGroupByDesc","groupByDesc","data","modelName","__props","chartData","xAxisData","Array","from","Set","map","item","filter","yGroupByDesc","find","xAxis","config","title","text","legend","name","dataZoom","type","disabled","length","series","yItem","legendData","String","legendDataItem","seriesData","forEach","xAxisItem","targetData","dataItem","push","stack","areaStyle","processSeriesData","seriesItem","subShowType","chartOptions","useCharts","chartDOM"],"mappings":"qfA6BA,MAAMA,EAAgBC,EAAAA,MAChBC,EAAQC,EAAAA,OAAOC,EAAAA,qBAAsBC,GAAWA,IAAG,GAYnDC,EACa,GADbA,EAEQ,QAoCR,MAAAC,EAAmBC,EAAAA,UAAwB,KAC/C,MAAMC,QAAEA,EAASC,aAAAA,EAAAC,YAAcA,OAAaC,EAAMC,UAAAA,GAAcC,EAAAC,UAC1DC,EAAYC,MAAMC,KAAK,IAAIC,IAAIP,GAAMQ,KAAYC,GAAAA,EAAKX,GAAcD,SAAW,QAAOa,QAAOD,GAAQA,WAAyC,GAC9IE,EAAeZ,GAAaa,MAAaH,IAACA,EAAKI,QAE/CC,EAAoD,CACxDC,MAAO,CAAEC,KAAMf,GACfgB,OAAQ,CAAEjB,KAAM,IAChBa,MAAO,CACLK,KAAMpB,GAAcD,SAAW,GAC/BG,KAAMI,GAERe,SAAU,CAAC,CACTC,KAAM,SACNC,SAAUjB,EAAUkB,OAAS5B,KAK7B,GAAwB,IAAxBK,GAAauB,OACRR,EAAAS,OAAS1B,EAAQW,KAAcgB,IAAA,CACpCN,KAAMM,EACNJ,KAAM,OACNpB,KAAMA,EAAKQ,KAAIC,GAAQA,EAAKe,KAAQd,QAAOD,GAAQA,cAEpDK,EAAOG,OAAiCjB,KAAOH,OAClD,GACiC,IAAxBE,GAAauB,OAAc,CAClC,MAAMG,EAAa,IAAI,IAAIlB,IAAIP,EAAKQ,KAAIC,GAAQiB,OAAOjB,EAAKE,GAAcd,SAAW,SACnFiB,EAAOG,OAAiCjB,KAAOyB,EAEjDX,EAAOS,OAASE,EAAWjB,QA/D/B,SAA2BmB,EACzBvB,EACAJ,EACAF,EACAa,EACAd,GACA,MAAM+B,EAAkC,GAiBjC,OAfGxB,EAAAyB,SAASC,IACjB,MAAMC,EAAa/B,EAChBY,MAAKoB,GACJA,EAASlC,GAAcD,WAAaiC,GACjCE,EAASrB,GAAcd,WAAa8B,IAGvCI,EACFH,EAAWK,KAAKF,EAAWlC,EAAQ,KAGnC+B,EAAWK,KAAK,EAAC,IAId,CACLf,KAAMS,EACNP,KAAM,OACNc,MAAOxC,EACPyC,UAAW,CAAC,EACZnC,KAAM4B,EACR,CAmCIQ,CAAkBT,EAAgBvB,EAAWJ,EAAMF,EAAca,EAAcd,IACjF,CAqBK,OAjBPiB,EAAOS,OAAST,EAAOS,QAAQf,KAAKC,IAC5B,MAAA4B,EAAa,IAAK5B,GAExB,OAAQP,EAAAoC,aACN,IAAK,cAML,eACSD,EAAWF,gBAJpB,IAAK,aACHE,EAAWF,UAAY,CAAC,EAMrB,OAAAE,CAAA,IAGF/C,EAAMwB,EAAQZ,EAAYqC,aAAA,WAEzBC,EAAAA,UAAA,CAAEC,SAAUrD,EAAemD,aAAc5C,EAAkBQ,UAAWP,YAAS,IAAMM,EAAAC"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("lodash-es"),r=require("../utils/injectionKeys.cjs"),o=require("../utils/useCharts.cjs"),a=e.defineComponent({name:"DataChartPie",__name:"pie",props:{chartData:{type:Object,required:!0,default:()=>({colDesc:[],xGroupByDesc:{colDesc:"",groupByDesc:"",groupByValues:[],xAxis:!1},groupByDesc:[],data:[],modelName:""})},subShowType:{type:String,required:!0,default:"pie-simple"},chartOptions:{type:null,required:!0}},setup(a){const c=e.inject(r.InjectionChartMerge,(e=>e),!0),s=e.ref(null),i=e.computed((()=>{const{colDesc:e,xGroupByDesc:r,data:o,modelName:s}=a.chartData,i=e.length,l={title:{text:s},series:e.map(((e,c)=>{const s={name:e,type:"pie",center:["50%","50%"],data:[],emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(0, 0, 0, 0.5)"}},label:{formatter:"{b}:{c}({d}%)",rich:{b:{color:"#4C5058",fontSize:14,fontWeight:"bold",lineHeight:33}}}};let l=5;const n=t.orderBy(t.cloneDeep(o),[e],["desc"]),u=n.reduce(((t,r)=>t+Number(r[e])),0);if(o.length>l)for(;l<9;){const t=n.slice(0,l);if(t.reduce(((t,r)=>t+Number(r[e])),0)/u>.9||8===l){const a=n.slice(l,n.length-1);s.data=o.map((o=>{let a={};return t.forEach((t=>{JSON.stringify(t)===JSON.stringify(o)&&(a={name:r?.colDesc?o[r.colDesc]:"",value:o[e]})})),a})).filter((e=>e)),s.data.push({name:"其它",value:a.reduce(((t,r)=>t+Number(r[e])),0)});break}l++}else s.data=o.map((t=>({name:r?.colDesc?t[r.colDesc]:"",value:Number(t[e])})));if(1===i?s.center=["50%","60%"]:2===i?0===c?(s.right="40%",s.left="",s.center=["40%","60%"]):(s.right="",s.left="40%",s.center=["60%","60%"]):3===i?0===c?(s.right="40%",s.bottom="50%",s.top="",s.left="",s.center=["40%","78%"]):1===c?(s.right="",s.bottom="50%",s.top="",s.left="40%",s.center=["60%","78%"]):(s.right="40%",s.bottom="",s.top="50%",s.left="",s.center=["40%","60%"]):4===i&&(0===c?(s.right="40%",s.bottom="50%",s.top="",s.left="",s.center=["40%","78%"]):1===c?(s.right="",s.bottom="50%",s.top="",s.left="40%",s.center=["60%","78%"]):2===c?(s.right="40%",s.bottom="",s.top="50%",s.left="",s.center=["40%","60%"]):(s.right="",s.bottom="",s.top="50%",s.left="40%",s.center=["60%","60%"])),"pie-borderRadius"===a.subShowType)s.radius=["50%","70%"];else s.radius="50%";return s}))};return c(l,a.chartOptions)}));return o.useCharts({chartDOM:s,chartOptions:i,chartData:e.computed((()=>a.chartData))}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartPie",ref:s,class:"data-chart-pie"},null,512))}});exports.default=a;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("lodash-es"),r=require("../utils/injectionKeys.cjs"),o=require("../utils/useCharts.cjs"),a=e.defineComponent({name:"DataChartPie",__name:"pie",props:{chartData:{type:Object,required:!0,default:()=>({colDesc:[],xGroupByDesc:{colDesc:"",groupByDesc:"",groupByValues:[],xAxis:!1},groupByDesc:[],data:[],modelName:""})},subShowType:{type:String,required:!0,default:"pie-simple"},chartOptions:{type:null,required:!0}},setup(a){const c=e.inject(r.InjectionChartMerge,(e=>e),!0),s=e.ref(null),i=e.computed((()=>{const{colDesc:e,xGroupByDesc:r,data:o,modelName:s}=a.chartData,i=e.length,l={title:{text:s},series:e.map(((e,c)=>{const s={name:e,type:"pie",center:["50%","50%"],data:[],emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(0, 0, 0, 0.5)"}},label:{formatter:"{b}:{c}({d}%)",rich:{b:{color:"#4C5058",fontSize:14,fontWeight:"bold",lineHeight:33}}}};let l=5;const n=t.orderBy(t.cloneDeep(o),[e],["desc"]),u=n.reduce(((t,r)=>t+Number(r[e])),0);if(o.length>l)for(;l<9;){const t=n.slice(0,l);if(t.reduce(((t,r)=>t+Number(r[e])),0)/u>.9||8===l){const a=n.slice(l,n.length-1);s.data=o.map((o=>{let a={};return t.forEach((t=>{JSON.stringify(t)===JSON.stringify(o)&&(a={name:r?.colDesc?o[r.colDesc]:"",value:o[e]})})),a})).filter((e=>e)),s.data.push({name:"其它",value:a.reduce(((t,r)=>t+Number(r[e])),0)});break}l++}else s.data=o.map((t=>({name:r?.colDesc&&t[r.colDesc]||"",value:Number(t[e]||0)})));if(1===i?s.center=["50%","60%"]:2===i?0===c?(s.right="40%",s.left="",s.center=["40%","60%"]):(s.right="",s.left="40%",s.center=["60%","60%"]):3===i?0===c?(s.right="40%",s.bottom="50%",s.top="",s.left="",s.center=["40%","78%"]):1===c?(s.right="",s.bottom="50%",s.top="",s.left="40%",s.center=["60%","78%"]):(s.right="40%",s.bottom="",s.top="50%",s.left="",s.center=["40%","60%"]):4===i&&(0===c?(s.right="40%",s.bottom="50%",s.top="",s.left="",s.center=["40%","78%"]):1===c?(s.right="",s.bottom="50%",s.top="",s.left="40%",s.center=["60%","78%"]):2===c?(s.right="40%",s.bottom="",s.top="50%",s.left="",s.center=["40%","60%"]):(s.right="",s.bottom="",s.top="50%",s.left="40%",s.center=["60%","60%"])),"pie-borderRadius"===a.subShowType)s.radius=["50%","70%"];else s.radius="50%";return s}))};return c(l,a.chartOptions)}));return o.useCharts({chartDOM:s,chartOptions:i,chartData:e.computed((()=>a.chartData))}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartPie",ref:s,class:"data-chart-pie"},null,512))}});exports.default=a;
2
2
  //# sourceMappingURL=pie.vue.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"pie.vue.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/pie.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PieSeriesOption } from 'echarts/charts'\nimport type { EChartsOption, IFormatPublicData } from '../types'\nimport { cloneDeep, orderBy } from 'lodash-es'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartPie',\n})\nconst {\n chartData = {\n colDesc: [],\n xGroupByDesc: {\n colDesc: '',\n groupByDesc: '',\n groupByValues: [],\n xAxis: false,\n },\n groupByDesc: [],\n data: [],\n modelName: '',\n },\n subShowType = 'pie-simple',\n chartOptions,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n}>()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\nconst dataChartPie = ref(null)\nconst pieChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, data, modelName } = chartData\n const colDescLength = colDesc.length\n const config = {\n title: { text: modelName },\n series: colDesc.map((item, index) => {\n const seriesItem: PieSeriesOption = {\n name: item,\n type: 'pie',\n center: ['50%', '50%'],\n data: [],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n },\n },\n label: {\n formatter: '{b}:{c}({d}%)',\n rich: {\n b: {\n color: '#4C5058',\n fontSize: 14,\n fontWeight: 'bold',\n lineHeight: 33,\n },\n },\n },\n }\n\n let cutNum = 5\n const orderByData = orderBy(cloneDeep(data), [item], ['desc'])\n // 总数\n const totalDesc = orderByData.reduce((prev, cur) => (prev + Number(cur[item])), 0)\n if (data.length > cutNum) {\n while (cutNum < 9) {\n const headerData = orderByData.slice(0, cutNum)\n // 前 cutNum 个总数\n const headerTotal = headerData.reduce((prev, cur) => prev + Number(cur[item]), 0)\n // 前五总占比\n const headerScale = headerTotal / totalDesc\n if (headerScale > 0.90 || cutNum === 8) {\n //\n const footerData = orderByData.slice(cutNum, orderByData.length - 1)\n seriesItem.data = data.map((yItem) => {\n let obj = {}\n headerData.forEach((headerDataItem) => {\n if (JSON.stringify(headerDataItem) === JSON.stringify(yItem)) {\n obj = {\n name: xGroupByDesc?.colDesc ? yItem[xGroupByDesc.colDesc] : '',\n value: yItem[item],\n }\n }\n })\n return obj\n }).filter(v => v)\n seriesItem.data.push({\n name: '其它',\n value: footerData.reduce((prev, cur) => prev + Number(cur[item]), 0),\n })\n\n break\n }\n else {\n cutNum++\n }\n }\n }\n else {\n seriesItem.data = data.map(yItem => ({\n name: xGroupByDesc?.colDesc ? yItem[xGroupByDesc.colDesc] : '',\n value: Number(yItem[item]),\n }))\n }\n\n if (colDescLength === 1) {\n seriesItem.center = ['50%', '60%']\n }\n else if (colDescLength === 2) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n else if (colDescLength === 3) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n }\n else if (colDescLength === 4) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else if (index === 2) {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n // 处理图表形状\n switch (subShowType) {\n case 'pie-borderRadius':\n seriesItem.radius = ['50%', '70%']\n break\n case 'pie-simple':\n seriesItem.radius = '50%'\n break\n default:\n seriesItem.radius = '50%'\n break\n }\n return seriesItem\n }),\n }\n return merge(config, chartOptions)\n})\n\nuseCharts({ chartDOM: dataChartPie, chartOptions: pieChartOptions, chartData: computed(() => chartData) })\n</script>\n\n<template>\n <div ref=\"dataChartPie\" class=\"data-chart-pie\" />\n</template>\n"],"names":["merge","inject","InjectionChartMerge","v","dataChartPie","ref","pieChartOptions","computed","colDesc","xGroupByDesc","data","modelName","__props","chartData","colDescLength","length","config","title","text","series","map","item","index","seriesItem","name","type","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","label","formatter","rich","b","color","fontSize","fontWeight","lineHeight","cutNum","orderByData","orderBy","cloneDeep","totalDesc","reduce","prev","cur","Number","headerData","slice","footerData","yItem","obj","forEach","headerDataItem","JSON","stringify","value","filter","push","right","left","bottom","top","subShowType","radius","chartOptions","useCharts","chartDOM"],"mappings":"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"}
1
+ {"version":3,"file":"pie.vue.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/pie.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PieSeriesOption } from \"echarts/charts\";\nimport type { EChartsOption, IFormatPublicData } from \"../types\";\nimport { cloneDeep, orderBy } from \"lodash-es\";\nimport { InjectionChartMerge } from \"../utils/injectionKeys\";\nimport { useCharts } from \"../utils/useCharts\";\n\ndefineOptions({\n name: \"DataChartPie\",\n});\nconst {\n chartData = {\n colDesc: [],\n xGroupByDesc: {\n colDesc: \"\",\n groupByDesc: \"\",\n groupByValues: [],\n xAxis: false,\n },\n groupByDesc: [],\n data: [],\n modelName: \"\",\n },\n subShowType = \"pie-simple\",\n chartOptions,\n} = defineProps<{\n chartData: IFormatPublicData;\n subShowType: string;\n chartOptions: EChartsOption;\n}>();\nconst merge = inject(InjectionChartMerge, (v: any) => v, true);\n\nconst dataChartPie = ref(null);\nconst pieChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, data, modelName } = chartData;\n const colDescLength = colDesc.length;\n const config = {\n title: { text: modelName },\n series: colDesc.map((item, index) => {\n const seriesItem: PieSeriesOption = {\n name: item,\n type: \"pie\",\n center: [\"50%\", \"50%\"],\n data: [],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: \"rgba(0, 0, 0, 0.5)\",\n },\n },\n label: {\n formatter: \"{b}:{c}({d}%)\",\n rich: {\n b: {\n color: \"#4C5058\",\n fontSize: 14,\n fontWeight: \"bold\",\n lineHeight: 33,\n },\n },\n },\n };\n\n let cutNum = 5;\n const orderByData = orderBy(cloneDeep(data), [item], [\"desc\"]);\n // 总数\n const totalDesc = orderByData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0\n );\n if (data.length > cutNum) {\n while (cutNum < 9) {\n const headerData = orderByData.slice(0, cutNum);\n // 前 cutNum 个总数\n const headerTotal = headerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0\n );\n // 前五总占比\n const headerScale = headerTotal / totalDesc;\n if (headerScale > 0.9 || cutNum === 8) {\n //\n const footerData = orderByData.slice(\n cutNum,\n orderByData.length - 1\n );\n seriesItem.data = data\n .map((yItem) => {\n let obj = {};\n headerData.forEach((headerDataItem) => {\n if (\n JSON.stringify(headerDataItem) === JSON.stringify(yItem)\n ) {\n obj = {\n name: xGroupByDesc?.colDesc\n ? yItem[xGroupByDesc.colDesc]\n : \"\",\n value: yItem[item],\n };\n }\n });\n return obj;\n })\n .filter((v) => v);\n seriesItem.data.push({\n name: \"其它\",\n value: footerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0\n ),\n });\n\n break;\n } else {\n cutNum++;\n }\n }\n } else {\n seriesItem.data = data.map((yItem) => ({\n name: xGroupByDesc?.colDesc ? (yItem[xGroupByDesc.colDesc] || '') : \"\",\n value: Number(yItem[item] || 0),\n }));\n }\n\n if (colDescLength === 1) {\n seriesItem.center = [\"50%\", \"60%\"];\n } else if (colDescLength === 2) {\n if (index === 0) {\n seriesItem.right = \"40%\";\n seriesItem.left = \"\";\n seriesItem.center = [\"40%\", \"60%\"];\n } else {\n seriesItem.right = \"\";\n seriesItem.left = \"40%\";\n seriesItem.center = [\"60%\", \"60%\"];\n }\n } else if (colDescLength === 3) {\n if (index === 0) {\n seriesItem.right = \"40%\";\n seriesItem.bottom = \"50%\";\n seriesItem.top = \"\";\n seriesItem.left = \"\";\n seriesItem.center = [\"40%\", \"78%\"];\n } else if (index === 1) {\n seriesItem.right = \"\";\n seriesItem.bottom = \"50%\";\n seriesItem.top = \"\";\n seriesItem.left = \"40%\";\n seriesItem.center = [\"60%\", \"78%\"];\n } else {\n seriesItem.right = \"40%\";\n seriesItem.bottom = \"\";\n seriesItem.top = \"50%\";\n seriesItem.left = \"\";\n seriesItem.center = [\"40%\", \"60%\"];\n }\n } else if (colDescLength === 4) {\n if (index === 0) {\n seriesItem.right = \"40%\";\n seriesItem.bottom = \"50%\";\n seriesItem.top = \"\";\n seriesItem.left = \"\";\n seriesItem.center = [\"40%\", \"78%\"];\n } else if (index === 1) {\n seriesItem.right = \"\";\n seriesItem.bottom = \"50%\";\n seriesItem.top = \"\";\n seriesItem.left = \"40%\";\n seriesItem.center = [\"60%\", \"78%\"];\n } else if (index === 2) {\n seriesItem.right = \"40%\";\n seriesItem.bottom = \"\";\n seriesItem.top = \"50%\";\n seriesItem.left = \"\";\n seriesItem.center = [\"40%\", \"60%\"];\n } else {\n seriesItem.right = \"\";\n seriesItem.bottom = \"\";\n seriesItem.top = \"50%\";\n seriesItem.left = \"40%\";\n seriesItem.center = [\"60%\", \"60%\"];\n }\n }\n // 处理图表形状\n switch (subShowType) {\n case \"pie-borderRadius\":\n seriesItem.radius = [\"50%\", \"70%\"];\n break;\n case \"pie-simple\":\n seriesItem.radius = \"50%\";\n break;\n default:\n seriesItem.radius = \"50%\";\n break;\n }\n return seriesItem;\n }),\n };\n return merge(config, chartOptions);\n});\n\nuseCharts({\n chartDOM: dataChartPie,\n chartOptions: pieChartOptions,\n chartData: computed(() => chartData),\n});\n</script>\n\n<template>\n <div ref=\"dataChartPie\" class=\"data-chart-pie\" />\n</template>\n"],"names":["merge","inject","InjectionChartMerge","v","dataChartPie","ref","pieChartOptions","computed","colDesc","xGroupByDesc","data","modelName","__props","chartData","colDescLength","length","config","title","text","series","map","item","index","seriesItem","name","type","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","label","formatter","rich","b","color","fontSize","fontWeight","lineHeight","cutNum","orderByData","orderBy","cloneDeep","totalDesc","reduce","prev","cur","Number","headerData","slice","footerData","yItem","obj","forEach","headerDataItem","JSON","stringify","value","filter","push","right","left","bottom","top","subShowType","radius","chartOptions","useCharts","chartDOM"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"file-upload.vue.cjs","sources":["../../../../../../packages/components/src/file-upload/src/file-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadProps, UploadUserFile } from \"element-plus\";\nimport { UploadFilled } from \"@element-plus/icons-vue\";\nimport { useNamespace } from \"@qxs-bns/hooks\";\n\ndefineOptions({\n name: \"QxsFileUpload\",\n});\n\nconst {\n name = \"file\",\n size = 20,\n max = 3,\n files = [],\n notip = false,\n accept = \"zip,rar\",\n} = defineProps<{\n action: UploadProps[\"action\"];\n headers?: UploadProps[\"headers\"];\n data?: UploadProps[\"data\"];\n name?: UploadProps[\"name\"];\n size?: number;\n max?: number;\n accept?: string;\n files?: UploadUserFile[];\n notip?: boolean;\n ext?: string[];\n}>();\n\nconst emit = defineEmits([\"onSuccess\"]);\n\nconst ns = useNamespace(\"file-upload\");\n\nconst exts = computed(() => {\n return accept.split(\",\")\n});\nconst beforeUpload: UploadProps[\"beforeUpload\"] = (file) => {\n const fileName = file.name.split(\".\");\n const fileExt = fileName.at(-1) ?? \"\";\n const isTypeOk = exts.value.includes(fileExt);\n const isSizeOk = file.size / 1024 / 1024 < size;\n if (!isTypeOk) {\n ElMessage.error(`上传文件只支持 ${exts.value.join(\" / \")} 格式!`);\n }\n if (!isSizeOk) {\n ElMessage.error(`上传文件大小不能超过 ${size}MB!`);\n }\n return isTypeOk && isSizeOk;\n};\n\nconst onExceed: UploadProps[\"onExceed\"] = () => {\n ElMessage.warning(\"文件上传超过限制\");\n};\n\nconst onSuccess: UploadProps[\"onSuccess\"] = (res, file, fileList) => {\n emit(\"onSuccess\", res, file, fileList);\n};\n</script>\n\n<template>\n <el-upload\n :headers=\"headers\"\n :action=\"action\"\n :data=\"data\"\n :name=\"name\"\n :before-upload=\"beforeUpload\"\n :on-exceed=\"onExceed\"\n :on-success=\"onSuccess\"\n :file-list=\"files\"\n :limit=\"max\"\n drag\n :class=\"ns.e('control')\"\n >\n <div class=\"slot\">\n <el-icon class=\"el-icon--upload\">\n <UploadFilled />\n </el-icon>\n <div class=\"el-upload__text\">将文件拖到此处,或<em>点击上传</em></div>\n </div>\n <template #tip>\n <div v-if=\"!notip\" class=\"el-upload__tip\">\n <div style=\"display: inline-block\">\n <el-alert\n :title=\"`上传文件支持 ${exts.join(\n ' / '\n )} 格式,单个文件大小不超过 ${size}MB,且文件数量不超过 ${max} 个`\"\n type=\"info\"\n show-icon\n :closable=\"false\"\n />\n </div>\n </div>\n </template>\n </el-upload>\n</template>\n"],"names":["emit","__emit","ns","useNamespace","exts","computed","__props","accept","split","beforeUpload","file","fileExt","name","at","isTypeOk","value","includes","isSizeOk","size","ElMessage","error","join","onExceed","warning","onSuccess","res","fileList"],"mappings":"2wBA6BA,MAAMA,EAAOC,EAEPC,EAAKC,eAAa,eAElBC,EAAOC,EAAAA,UAAS,IACbC,EAAAC,OAAOC,MAAM,OAEhBC,EAA6CC,IACjD,MACMC,EADWD,EAAKE,KAAKJ,MAAM,KACRK,IAAG,IAAO,GAC7BC,EAAWV,EAAKW,MAAMC,SAASL,GAC/BM,EAAWP,EAAKQ,KAAO,KAAO,KAAOZ,EAAIY,KAO/C,OANKJ,GACHK,YAAUC,MAAM,WAAWhB,EAAKW,MAAMM,KAAK,cAExCJ,GACHE,EAAAA,UAAUC,MAAM,cAAcd,EAAIY,WAE7BJ,GAAYG,CAAA,EAGfK,EAAoC,KACxCH,EAAAA,UAAUI,QAAQ,WAAU,EAGxBC,EAAsC,CAACC,EAAKf,EAAMgB,KACjD1B,EAAA,YAAayB,EAAKf,EAAMgB,EAAQ"}
1
+ {"version":3,"file":"file-upload.vue.cjs","sources":["../../../../../../packages/components/src/file-upload/src/file-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadProps, UploadUserFile } from \"element-plus\";\nimport { UploadFilled } from \"@element-plus/icons-vue\";\nimport { useNamespace } from \"@qxs-bns/hooks\";\n\ndefineOptions({\n name: \"QxsFileUpload\",\n});\n\nconst {\n name = \"file\",\n size = 20,\n max = 3,\n files = [],\n notip = false,\n accept = \"zip,rar\",\n} = defineProps<{\n action: UploadProps[\"action\"];\n headers?: UploadProps[\"headers\"];\n data?: UploadProps[\"data\"];\n name?: UploadProps[\"name\"];\n size?: number;\n max?: number;\n accept?: string;\n files?: UploadUserFile[];\n notip?: boolean;\n ext?: string[];\n}>();\n\nconst emit = defineEmits([\"onSuccess\"]);\n\nconst ns = useNamespace(\"file-upload\");\n\nconst exts = computed(() => {\n return accept.split(\",\");\n});\nconst beforeUpload: UploadProps[\"beforeUpload\"] = (file) => {\n const fileName = file.name.split(\".\");\n const fileExt = fileName.at(-1) ?? \"\";\n const isTypeOk = exts.value.includes(fileExt);\n const isSizeOk = file.size / 1024 / 1024 < size;\n if (!isTypeOk) {\n ElMessage.error(`上传文件只支持 ${exts.value.join(\" / \")} 格式!`);\n }\n if (!isSizeOk) {\n ElMessage.error(`上传文件大小不能超过 ${size}MB!`);\n }\n return isTypeOk && isSizeOk;\n};\n\nconst onExceed: UploadProps[\"onExceed\"] = () => {\n ElMessage.warning(\"文件上传超过限制\");\n};\n\nconst onSuccess: UploadProps[\"onSuccess\"] = (res, file, fileList) => {\n emit(\"onSuccess\", res, file, fileList);\n};\n</script>\n\n<template>\n <el-upload\n :headers=\"headers\"\n :action=\"action\"\n :data=\"data\"\n :name=\"name\"\n :before-upload=\"beforeUpload\"\n :on-exceed=\"onExceed\"\n :on-success=\"onSuccess\"\n :file-list=\"files\"\n :limit=\"max\"\n drag\n :class=\"ns.e('control')\"\n >\n <div class=\"slot\">\n <el-icon class=\"el-icon--upload\">\n <UploadFilled />\n </el-icon>\n <div class=\"el-upload__text\">将文件拖到此处,或<em>点击上传</em></div>\n </div>\n <template #tip>\n <div v-if=\"!notip\" class=\"el-upload__tip\">\n <div style=\"display: inline-block\">\n <el-alert\n :title=\"`上传文件支持 ${exts.join(\n ' / '\n )} 格式,单个文件大小不超过 ${size}MB,且文件数量不超过 ${max} 个`\"\n type=\"info\"\n show-icon\n :closable=\"false\"\n />\n </div>\n </div>\n </template>\n </el-upload>\n</template>\n"],"names":["emit","__emit","ns","useNamespace","exts","computed","__props","accept","split","beforeUpload","file","fileExt","name","at","isTypeOk","value","includes","isSizeOk","size","ElMessage","error","join","onExceed","warning","onSuccess","res","fileList"],"mappings":"2wBA6BA,MAAMA,EAAOC,EAEPC,EAAKC,eAAa,eAElBC,EAAOC,EAAAA,UAAS,IACbC,EAAAC,OAAOC,MAAM,OAEhBC,EAA6CC,IACjD,MACMC,EADWD,EAAKE,KAAKJ,MAAM,KACRK,IAAG,IAAO,GAC7BC,EAAWV,EAAKW,MAAMC,SAASL,GAC/BM,EAAWP,EAAKQ,KAAO,KAAO,KAAOZ,EAAIY,KAO/C,OANKJ,GACHK,YAAUC,MAAM,WAAWhB,EAAKW,MAAMM,KAAK,cAExCJ,GACHE,EAAAA,UAAUC,MAAM,cAAcd,EAAIY,WAE7BJ,GAAYG,CAAA,EAGfK,EAAoC,KACxCH,EAAAA,UAAUI,QAAQ,WAAU,EAGxBC,EAAsC,CAACC,EAAKf,EAAMgB,KACjD1B,EAAA,YAAayB,EAAKf,EAAMgB,EAAQ"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("@qxs-bns/hooks"),l=require("@vueuse/core"),a=require("./composables.cjs");const o=["src"];var u=e.defineComponent({name:"QxsPhotoCropTool",__name:"photo-crop-tool",props:{imgFile:{type:Object,default:()=>null},aspectRatio:{type:String,default:()=>"16 / 9"},defaultWidth:{type:Number,default:()=>320},defaultHeight:{type:Number,default:()=>180},zoomType:{type:String,default:()=>"fixed"}},setup(u,{expose:i}){const n=u;let r=0,s=0,v=0,h=0;const c=t.useNamespace("photo-crop-tool"),f=e.ref(null),p=e.ref(null),d=e.ref(null),m=e.ref(""),g=e.ref(""),y=e.ref({x:0,y:0}),w=e.ref({width:n.defaultWidth,height:n.defaultHeight,x:0,y:0}),{width:x,height:b}=l.useElementSize(f),{width:z}=l.useElementSize(d),{x:E,y:N,style:R}=l.useDraggable(f,{containerElement:p,draggingElement:f,disabled:e.computed((()=>!!g.value)),exact:!0,initialValue:y}),k=e.computed((()=>n.imgFile?URL.createObjectURL(n.imgFile):""));e.watch((()=>n.imgFile),(e=>{e&&!e.type.startsWith("image/")?m.value="文件类型错误":m.value=""}));const H=e.computed((()=>(d.value?.naturalWidth||0)/z.value)),C=e.computed((()=>{const e={left:0,top:0};return"bottom-right"===g.value?(e.left=w.value.x,e.top=w.value.y):"top-left"===g.value?(e.left=w.value.x-x.value,e.top=w.value.y-b.value):"top-right"===g.value?(e.top=w.value.y-b.value,e.left=w.value.x):"bottom-left"===g.value&&(e.left=w.value.x-x.value,e.top=w.value.y),e})),T=e.computed((()=>{const{aspectRatio:e}=n,t={width:`${w.value.width||n.defaultWidth}`,height:`${w.value.height||n.defaultHeight}`,"aspect-ratio":e,top:`${C.value.top}px`,left:`${C.value.left}px`};return"free"===n.zoomType?delete t["aspect-ratio"]:"fixed"===n.zoomType&&delete t.height,c.cssVarBlock(t)}));function F(e){return e*H.value}function M(e,t){const l=p.value?.clientWidth||1/0,a=p.value?.clientHeight||1/0;return{width:Math.min(Math.max(e,0),l),height:Math.min(Math.max(t,0),a)}}function W(e){const t=e.clientX-r,l=e.clientY-s;if("bottom-right"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v+t,h+l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v+t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}}else if("top-left"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v-t,h-l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v-t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}E.value=C.value.left,N.value=C.value.top}else if("top-right"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v+t,h-l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v+t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}E.value=C.value.left,N.value=C.value.top}else if("bottom-left"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v-t,h+l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v-t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}E.value=C.value.left,N.value=C.value.top}e.preventDefault(),e.stopPropagation()}function B(e,t){g.value=t,r=e.clientX,s=e.clientY,v=w.value.width,h=w.value.height,"bottom-right"===t?(w.value.x=E.value,w.value.y=N.value):"top-left"===t?(w.value.x=E.value+x.value,w.value.y=N.value+b.value):"top-right"===t?(w.value.x=E.value,w.value.y=N.value+b.value):"bottom-left"===t&&(w.value.x=E.value+x.value,w.value.y=N.value)}function L(){g.value=""}return document.addEventListener("mouseup",L),document.addEventListener("mousemove",W),e.onMounted((()=>{e.nextTick((()=>{y.value.x=(p.value?.offsetWidth||0)/2-w.value.width/2,y.value.y=(p.value?.offsetHeight||0)/2-w.value.height/2}))})),e.onUnmounted((()=>{k.value&&URL.revokeObjectURL(k.value),document.removeEventListener("mouseup",L),document.removeEventListener("mousemove",W)})),i({crop:async function(e=d.value){let t="transparent";p.value&&(t=window.getComputedStyle(p.value).backgroundColor);const l=document.createElement("canvas");l.width=F(p.value?.clientWidth||0),l.height=F(p.value?.clientHeight||0);const{drawImage:o,cropCanvas:u,drawColor:i}=a.useCanvas(l);return i(0,0,l.width,l.height,t),o(e,F(e.offsetLeft),F(e.offsetTop),e.naturalWidth,e.naturalHeight),await u(F(E.value),F(N.value),F(x.value),F(b.value))},resize:function(){w.value.width=n.defaultWidth,w.value.height=n.defaultHeight,E.value=0,N.value=0}}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerBoxRef",ref:p,class:e.normalizeClass([e.unref(c).e("img-box")])},[e.unref(m)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(c).e("error-message")])},e.toDisplayString(e.unref(m)),3)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("img",{ref_key:"imgRef",ref:d,class:e.normalizeClass([e.unref(c).e("image")]),src:e.unref(k)},null,10,o),e.createElementVNode("div",{ref_key:"cropBoxRef",ref:f,class:e.normalizeClass([e.unref(c).e("crop-tool-box")]),style:e.normalizeStyle([e.unref(T),e.unref(g)?`left: ${e.unref(C).left}px;top: ${e.unref(C).top}px`:e.unref(R)])},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("top-left")]),onMousedown:l[0]||(l[0]=e=>B(e,"top-left"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("top-right")]),onMousedown:l[1]||(l[1]=e=>B(e,"top-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("bottom-right")]),onMousedown:l[2]||(l[2]=e=>B(e,"bottom-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("bottom-left")]),onMousedown:l[3]||(l[3]=e=>B(e,"bottom-left"))},null,34)],6)],64))],2))}});exports.default=u;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("@qxs-bns/hooks"),l=require("./composables.cjs"),a=require("@vueuse/core");const o=["src"];var u=e.defineComponent({name:"QxsPhotoCropTool",__name:"photo-crop-tool",props:{imgFile:{type:Object,default:()=>null},aspectRatio:{type:String,default:()=>"16 / 9"},defaultWidth:{type:Number,default:()=>320},defaultHeight:{type:Number,default:()=>180},zoomType:{type:String,default:()=>"fixed"}},setup(u,{expose:i}){const n=u;let r=0,s=0,v=0,h=0;const c=t.useNamespace("photo-crop-tool"),f=e.ref(null),p=e.ref(null),d=e.ref(null),m=e.ref(""),g=e.ref(""),y=e.ref({x:0,y:0}),w=e.ref({width:n.defaultWidth,height:n.defaultHeight,x:0,y:0}),{width:x,height:b}=a.useElementSize(f),{width:z}=a.useElementSize(d),{x:E,y:N,style:R}=a.useDraggable(f,{containerElement:p,draggingElement:f,disabled:e.computed((()=>!!g.value)),exact:!0,initialValue:y}),k=e.computed((()=>n.imgFile?URL.createObjectURL(n.imgFile):""));e.watch((()=>n.imgFile),(e=>{e&&!e.type.startsWith("image/")?m.value="文件类型错误":m.value=""}));const H=e.computed((()=>(d.value?.naturalWidth||0)/z.value)),C=e.computed((()=>{const e={left:0,top:0};return"bottom-right"===g.value?(e.left=w.value.x,e.top=w.value.y):"top-left"===g.value?(e.left=w.value.x-x.value,e.top=w.value.y-b.value):"top-right"===g.value?(e.top=w.value.y-b.value,e.left=w.value.x):"bottom-left"===g.value&&(e.left=w.value.x-x.value,e.top=w.value.y),e})),T=e.computed((()=>{const{aspectRatio:e}=n,t={width:`${w.value.width||n.defaultWidth}`,height:`${w.value.height||n.defaultHeight}`,"aspect-ratio":e,top:`${C.value.top}px`,left:`${C.value.left}px`};return"free"===n.zoomType?delete t["aspect-ratio"]:"fixed"===n.zoomType&&delete t.height,c.cssVarBlock(t)}));function F(e){return e*H.value}function M(e,t){const l=p.value?.clientWidth||1/0,a=p.value?.clientHeight||1/0;return{width:Math.min(Math.max(e,0),l),height:Math.min(Math.max(t,0),a)}}function W(e){const t=e.clientX-r,l=e.clientY-s;if("bottom-right"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v+t,h+l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v+t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}}else if("top-left"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v-t,h-l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v-t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}E.value=C.value.left,N.value=C.value.top}else if("top-right"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v+t,h-l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v+t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}E.value=C.value.left,N.value=C.value.top}else if("bottom-left"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v-t,h+l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v-t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}E.value=C.value.left,N.value=C.value.top}e.preventDefault(),e.stopPropagation()}function B(e,t){g.value=t,r=e.clientX,s=e.clientY,v=w.value.width,h=w.value.height,"bottom-right"===t?(w.value.x=E.value,w.value.y=N.value):"top-left"===t?(w.value.x=E.value+x.value,w.value.y=N.value+b.value):"top-right"===t?(w.value.x=E.value,w.value.y=N.value+b.value):"bottom-left"===t&&(w.value.x=E.value+x.value,w.value.y=N.value)}function L(){g.value=""}return document.addEventListener("mouseup",L),document.addEventListener("mousemove",W),e.onMounted((()=>{e.nextTick((()=>{y.value.x=(p.value?.offsetWidth||0)/2-w.value.width/2,y.value.y=(p.value?.offsetHeight||0)/2-w.value.height/2}))})),e.onUnmounted((()=>{k.value&&URL.revokeObjectURL(k.value),document.removeEventListener("mouseup",L),document.removeEventListener("mousemove",W)})),i({crop:async function(e=d.value){let t="transparent";p.value&&(t=window.getComputedStyle(p.value).backgroundColor);const a=document.createElement("canvas");a.width=F(p.value?.clientWidth||0),a.height=F(p.value?.clientHeight||0);const{drawImage:o,cropCanvas:u,drawColor:i}=l.useCanvas(a);return i(0,0,a.width,a.height,t),o(e,F(e.offsetLeft),F(e.offsetTop),e.naturalWidth,e.naturalHeight),await u(F(E.value),F(N.value),F(x.value),F(b.value))},resize:function(){w.value.width=n.defaultWidth,w.value.height=n.defaultHeight,E.value=0,N.value=0}}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerBoxRef",ref:p,class:e.normalizeClass([e.unref(c).e("img-box")])},[e.unref(m)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(c).e("error-message")])},e.toDisplayString(e.unref(m)),3)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("img",{ref_key:"imgRef",ref:d,class:e.normalizeClass([e.unref(c).e("image")]),src:e.unref(k)},null,10,o),e.createElementVNode("div",{ref_key:"cropBoxRef",ref:f,class:e.normalizeClass([e.unref(c).e("crop-tool-box")]),style:e.normalizeStyle([e.unref(T),e.unref(g)?`left: ${e.unref(C).left}px;top: ${e.unref(C).top}px`:e.unref(R)])},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("top-left")]),onMousedown:l[0]||(l[0]=e=>B(e,"top-left"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("top-right")]),onMousedown:l[1]||(l[1]=e=>B(e,"top-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("bottom-right")]),onMousedown:l[2]||(l[2]=e=>B(e,"bottom-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("bottom-left")]),onMousedown:l[3]||(l[3]=e=>B(e,"bottom-left"))},null,34)],6)],64))],2))}});exports.default=u;
2
2
  //# sourceMappingURL=photo-crop-tool.vue.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"photo-crop-tool.vue.cjs","sources":["../../../../../../packages/components/src/photo-crop-tool/src/photo-crop-tool.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { useDraggable, useElementSize } from '@vueuse/core'\nimport { useCanvas } from './composables'\n\ndefineOptions({\n name: 'QxsPhotoCropTool',\n})\n\nconst props = defineProps({\n imgFile: {\n type: Object as PropType<File>,\n default: () => null,\n },\n aspectRatio: {\n type: String,\n default: () => '16 / 9',\n },\n defaultWidth: {\n type: Number,\n default: () => 320,\n },\n defaultHeight: {\n type: Number,\n default: () => 180,\n },\n /**\n * free 自由缩放\n * fixed 固定比例缩放\n */\n zoomType: {\n type: String,\n default: () => 'fixed',\n },\n})\nlet startX = 0\nlet startY = 0\nlet startWidth = 0\nlet startHeight = 0\n\nconst ns = useNamespace('photo-crop-tool')\n\nconst cropBoxRef = ref<HTMLElement | null>(null)\nconst containerBoxRef = ref<HTMLElement | null>(null)\nconst imgRef = ref<HTMLImageElement | null>(null)\nconst errorMessage = ref('')\nconst dargPoint = ref('')\nconst initialValue = ref({\n x: 0,\n y: 0,\n})\nconst cropInfo = ref({\n width: props.defaultWidth,\n height: props.defaultHeight,\n x: 0,\n y: 0,\n})\n\nconst { width, height } = useElementSize(cropBoxRef)\nconst { width: imgWidth } = useElementSize(imgRef)\n\nconst { x, y, style } = useDraggable(cropBoxRef, {\n containerElement: containerBoxRef,\n draggingElement: cropBoxRef,\n disabled: computed(() => !!dargPoint.value),\n exact: true,\n initialValue,\n})\n\nconst imageUrl = computed(() => {\n if (!props.imgFile) {\n return ''\n }\n return URL.createObjectURL(props.imgFile)\n})\n\nwatch(\n () => props.imgFile,\n (newFile: File | null) => {\n if (newFile && !newFile.type.startsWith('image/')) {\n errorMessage.value = '文件类型错误'\n }\n else {\n errorMessage.value = ''\n }\n },\n)\n\nconst ratio = computed(() => {\n return (imgRef.value?.naturalWidth || 0) / imgWidth.value\n})\n\nconst customStyle = computed(() => {\n const position = {\n left: 0,\n top: 0,\n }\n if (dargPoint.value === 'bottom-right') {\n position.left = cropInfo.value.x\n position.top = cropInfo.value.y\n }\n else if (dargPoint.value === 'top-left') {\n position.left = cropInfo.value.x - width.value\n position.top = cropInfo.value.y - height.value\n }\n else if (dargPoint.value === 'top-right') {\n position.top = cropInfo.value.y - height.value\n position.left = cropInfo.value.x\n }\n else if (dargPoint.value === 'bottom-left') {\n position.left = cropInfo.value.x - width.value\n position.top = cropInfo.value.y\n }\n return position\n})\n\nconst sizeStyle = computed(() => {\n const { aspectRatio } = props\n\n const style: {\n 'height'?: string\n 'width': string\n 'aspect-ratio'?: string\n 'top': string\n 'left': string\n } = {\n 'width': `${cropInfo.value.width || props.defaultWidth}`,\n 'height': `${cropInfo.value.height || props.defaultHeight}`,\n 'aspect-ratio': aspectRatio,\n 'top': `${customStyle.value.top}px`,\n 'left': `${customStyle.value.left}px`,\n }\n if (props.zoomType === 'free') {\n delete style['aspect-ratio']\n }\n else if (props.zoomType === 'fixed') {\n delete style.height\n }\n return ns.cssVarBlock(style)\n})\n\nfunction zoom(pixel: number) {\n return pixel * ratio.value\n}\nasync function crop(img: HTMLImageElement = imgRef.value!) {\n let backgroundColor = 'transparent'\n if (containerBoxRef.value) {\n backgroundColor = window.getComputedStyle(\n containerBoxRef.value,\n ).backgroundColor\n }\n const canvas = document.createElement('canvas')\n canvas.width = zoom(containerBoxRef.value?.clientWidth || 0)\n canvas.height = zoom(containerBoxRef.value?.clientHeight || 0)\n const { drawImage, cropCanvas, drawColor } = useCanvas(canvas)\n drawColor(0, 0, canvas.width, canvas.height, backgroundColor)\n drawImage(\n img,\n zoom(img.offsetLeft),\n zoom(img.offsetTop),\n img.naturalWidth,\n img.naturalHeight,\n )\n return await cropCanvas(\n zoom(x.value),\n zoom(y.value),\n zoom(width.value),\n zoom(height.value),\n )\n}\n\nfunction checkBoundaries(\n newWidth: number,\n newHeight: number,\n): { width: number, height: number } {\n const maxWidth = containerBoxRef.value?.clientWidth || Infinity\n const maxHeight = containerBoxRef.value?.clientHeight || Infinity\n\n return {\n width: Math.min(Math.max(newWidth, 0), maxWidth),\n height: Math.min(Math.max(newHeight, 0), maxHeight),\n }\n}\n\nfunction mousemove(e: MouseEvent) {\n const deltaX = e.clientX - startX\n const deltaY = e.clientY - startY\n\n if (dargPoint.value === 'bottom-right') {\n if (props.zoomType === 'free') {\n const { width, height } = checkBoundaries(\n startWidth + deltaX,\n startHeight + deltaY,\n )\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n else if (props.zoomType === 'fixed') {\n const aspectRatio\n = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n let newWidth = startWidth + deltaX\n let newHeight = newWidth / aspectRatio\n const { width, height } = checkBoundaries(newWidth, newHeight)\n if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n newHeight = containerBoxRef.value?.clientHeight || Infinity\n newWidth = newHeight * aspectRatio\n }\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n }\n else if (dargPoint.value === 'top-left') {\n if (props.zoomType === 'free') {\n const { width, height } = checkBoundaries(\n startWidth - deltaX,\n startHeight - deltaY,\n )\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n else if (props.zoomType === 'fixed') {\n const aspectRatio\n = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n let newWidth = startWidth - deltaX\n let newHeight = newWidth / aspectRatio\n const { width, height } = checkBoundaries(newWidth, newHeight)\n if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n newHeight = containerBoxRef.value?.clientHeight || Infinity\n newWidth = newHeight * aspectRatio\n }\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n x.value = customStyle.value.left\n y.value = customStyle.value.top\n }\n else if (dargPoint.value === 'top-right') {\n if (props.zoomType === 'free') {\n const { width, height } = checkBoundaries(\n startWidth + deltaX,\n startHeight - deltaY,\n )\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n else if (props.zoomType === 'fixed') {\n const aspectRatio\n = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n let newWidth = startWidth + deltaX\n let newHeight = newWidth / aspectRatio\n const { width, height } = checkBoundaries(newWidth, newHeight)\n if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n newHeight = containerBoxRef.value?.clientHeight || Infinity\n newWidth = newHeight * aspectRatio\n }\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n x.value = customStyle.value.left\n y.value = customStyle.value.top\n }\n else if (dargPoint.value === 'bottom-left') {\n if (props.zoomType === 'free') {\n const { width, height } = checkBoundaries(\n startWidth - deltaX,\n startHeight + deltaY,\n )\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n else if (props.zoomType === 'fixed') {\n const aspectRatio\n = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n let newWidth = startWidth - deltaX\n let newHeight = newWidth / aspectRatio\n const { width, height } = checkBoundaries(newWidth, newHeight)\n if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n newHeight = containerBoxRef.value?.clientHeight || Infinity\n newWidth = newHeight * aspectRatio\n }\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n x.value = customStyle.value.left\n y.value = customStyle.value.top\n }\n e.preventDefault()\n e.stopPropagation()\n}\n\nfunction mousedown(e: MouseEvent, point: string) {\n dargPoint.value = point\n startX = e.clientX\n startY = e.clientY\n startWidth = cropInfo.value.width\n startHeight = cropInfo.value.height\n\n if (point === 'bottom-right') {\n cropInfo.value.x = x.value\n cropInfo.value.y = y.value\n }\n else if (point === 'top-left') {\n cropInfo.value.x = x.value + width.value\n cropInfo.value.y = y.value + height.value\n }\n else if (point === 'top-right') {\n cropInfo.value.x = x.value\n cropInfo.value.y = y.value + height.value\n }\n else if (point === 'bottom-left') {\n cropInfo.value.x = x.value + width.value\n cropInfo.value.y = y.value\n }\n}\n\nfunction mouseup() {\n dargPoint.value = ''\n}\n\nfunction resize() {\n cropInfo.value.width = props.defaultWidth\n cropInfo.value.height = props.defaultHeight\n x.value = 0\n y.value = 0\n}\n\ndocument.addEventListener('mouseup', mouseup)\ndocument.addEventListener('mousemove', mousemove)\n\nonMounted(() => {\n nextTick(() => {\n // 初始化位置\n initialValue.value.x\n = (containerBoxRef.value?.offsetWidth || 0) / 2 - cropInfo.value.width / 2\n initialValue.value.y\n = (containerBoxRef.value?.offsetHeight || 0) / 2\n - cropInfo.value.height / 2\n })\n})\n\nonUnmounted(() => {\n if (imageUrl.value) {\n URL.revokeObjectURL(imageUrl.value)\n }\n document.removeEventListener('mouseup', mouseup)\n document.removeEventListener('mousemove', mousemove)\n})\n\ndefineExpose({\n crop,\n resize,\n})\n</script>\n\n<template>\n <div ref=\"containerBoxRef\" :class=\"[ns.e('img-box')]\">\n <div v-if=\"errorMessage\" :class=\"[ns.e('error-message')]\">\n {{ errorMessage }}\n </div>\n <template v-else>\n <img\n ref=\"imgRef\"\n :class=\"[ns.e('image')]\"\n :src=\"imageUrl\"\n >\n <div\n ref=\"cropBoxRef\"\n :class=\"[ns.e('crop-tool-box')]\"\n :style=\"[\n sizeStyle,\n dargPoint\n ? `left: ${customStyle.left}px;top: ${customStyle.top}px`\n : style,\n ]\"\n >\n <div\n :class=\"[ns.e('top-left')]\"\n @mousedown=\"mousedown($event, 'top-left')\"\n />\n <div\n :class=\"[ns.e('top-right')]\"\n @mousedown=\"mousedown($event, 'top-right')\"\n />\n <div\n :class=\"[ns.e('bottom-right')]\"\n @mousedown=\"mousedown($event, 'bottom-right')\"\n />\n <div\n :class=\"[ns.e('bottom-left')]\"\n @mousedown=\"mousedown($event, 'bottom-left')\"\n />\n </div>\n </template>\n </div>\n</template>\n"],"names":["props","__props","startX","startY","startWidth","startHeight","ns","useNamespace","cropBoxRef","ref","containerBoxRef","imgRef","errorMessage","dargPoint","initialValue","x","y","cropInfo","width","defaultWidth","height","defaultHeight","useElementSize","imgWidth","style","useDraggable","containerElement","draggingElement","disabled","computed","value","exact","imageUrl","imgFile","URL","createObjectURL","watch","newFile","type","startsWith","ratio","naturalWidth","customStyle","position","left","top","sizeStyle","aspectRatio","zoomType","cssVarBlock","zoom","pixel","checkBoundaries","newWidth","newHeight","maxWidth","clientWidth","Infinity","maxHeight","clientHeight","Math","min","max","mousemove","e","deltaX","clientX","deltaY","clientY","Number","parseFloat","split","preventDefault","stopPropagation","mousedown","point","mouseup","document","addEventListener","onMounted","nextTick","offsetWidth","offsetHeight","onUnmounted","revokeObjectURL","removeEventListener","__expose","crop","async","img","backgroundColor","window","getComputedStyle","canvas","createElement","drawImage","cropCanvas","drawColor","useCanvas","offsetLeft","offsetTop","naturalHeight","resize"],"mappings":"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"}
1
+ {"version":3,"file":"photo-crop-tool.vue.cjs","sources":["../../../../../../packages/components/src/photo-crop-tool/src/photo-crop-tool.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { useCanvas } from './composables'\n\ndefineOptions({\n name: 'QxsPhotoCropTool',\n})\n\nconst props = defineProps({\n imgFile: {\n type: Object as PropType<File>,\n default: () => null,\n },\n aspectRatio: {\n type: String,\n default: () => '16 / 9',\n },\n defaultWidth: {\n type: Number,\n default: () => 320,\n },\n defaultHeight: {\n type: Number,\n default: () => 180,\n },\n /**\n * free 自由缩放\n * fixed 固定比例缩放\n */\n zoomType: {\n type: String,\n default: () => 'fixed',\n },\n})\nlet startX = 0\nlet startY = 0\nlet startWidth = 0\nlet startHeight = 0\n\nconst ns = useNamespace('photo-crop-tool')\n\nconst cropBoxRef = ref<HTMLElement | null>(null)\nconst containerBoxRef = ref<HTMLElement | null>(null)\nconst imgRef = ref<HTMLImageElement | null>(null)\nconst errorMessage = ref('')\nconst dargPoint = ref('')\nconst initialValue = ref({\n x: 0,\n y: 0,\n})\nconst cropInfo = ref({\n width: props.defaultWidth,\n height: props.defaultHeight,\n x: 0,\n y: 0,\n})\n\nconst { width, height } = useElementSize(cropBoxRef)\nconst { width: imgWidth } = useElementSize(imgRef)\n\nconst { x, y, style } = useDraggable(cropBoxRef, {\n containerElement: containerBoxRef,\n draggingElement: cropBoxRef,\n disabled: computed(() => !!dargPoint.value),\n exact: true,\n initialValue,\n})\n\nconst imageUrl = computed(() => {\n if (!props.imgFile) {\n return ''\n }\n return URL.createObjectURL(props.imgFile)\n})\n\nwatch(\n () => props.imgFile,\n (newFile: File | null) => {\n if (newFile && !newFile.type.startsWith('image/')) {\n errorMessage.value = '文件类型错误'\n }\n else {\n errorMessage.value = ''\n }\n },\n)\n\nconst ratio = computed(() => {\n return (imgRef.value?.naturalWidth || 0) / imgWidth.value\n})\n\nconst customStyle = computed(() => {\n const position = {\n left: 0,\n top: 0,\n }\n if (dargPoint.value === 'bottom-right') {\n position.left = cropInfo.value.x\n position.top = cropInfo.value.y\n }\n else if (dargPoint.value === 'top-left') {\n position.left = cropInfo.value.x - width.value\n position.top = cropInfo.value.y - height.value\n }\n else if (dargPoint.value === 'top-right') {\n position.top = cropInfo.value.y - height.value\n position.left = cropInfo.value.x\n }\n else if (dargPoint.value === 'bottom-left') {\n position.left = cropInfo.value.x - width.value\n position.top = cropInfo.value.y\n }\n return position\n})\n\nconst sizeStyle = computed(() => {\n const { aspectRatio } = props\n\n const style: {\n 'height'?: string\n 'width': string\n 'aspect-ratio'?: string\n 'top': string\n 'left': string\n } = {\n 'width': `${cropInfo.value.width || props.defaultWidth}`,\n 'height': `${cropInfo.value.height || props.defaultHeight}`,\n 'aspect-ratio': aspectRatio,\n 'top': `${customStyle.value.top}px`,\n 'left': `${customStyle.value.left}px`,\n }\n if (props.zoomType === 'free') {\n delete style['aspect-ratio']\n }\n else if (props.zoomType === 'fixed') {\n delete style.height\n }\n return ns.cssVarBlock(style)\n})\n\nfunction zoom(pixel: number) {\n return pixel * ratio.value\n}\nasync function crop(img: HTMLImageElement = imgRef.value!) {\n let backgroundColor = 'transparent'\n if (containerBoxRef.value) {\n backgroundColor = window.getComputedStyle(\n containerBoxRef.value,\n ).backgroundColor\n }\n const canvas = document.createElement('canvas')\n canvas.width = zoom(containerBoxRef.value?.clientWidth || 0)\n canvas.height = zoom(containerBoxRef.value?.clientHeight || 0)\n const { drawImage, cropCanvas, drawColor } = useCanvas(canvas)\n drawColor(0, 0, canvas.width, canvas.height, backgroundColor)\n drawImage(\n img,\n zoom(img.offsetLeft),\n zoom(img.offsetTop),\n img.naturalWidth,\n img.naturalHeight,\n )\n return await cropCanvas(\n zoom(x.value),\n zoom(y.value),\n zoom(width.value),\n zoom(height.value),\n )\n}\n\nfunction checkBoundaries(\n newWidth: number,\n newHeight: number,\n): { width: number, height: number } {\n const maxWidth = containerBoxRef.value?.clientWidth || Infinity\n const maxHeight = containerBoxRef.value?.clientHeight || Infinity\n\n return {\n width: Math.min(Math.max(newWidth, 0), maxWidth),\n height: Math.min(Math.max(newHeight, 0), maxHeight),\n }\n}\n\nfunction mousemove(e: MouseEvent) {\n const deltaX = e.clientX - startX\n const deltaY = e.clientY - startY\n\n if (dargPoint.value === 'bottom-right') {\n if (props.zoomType === 'free') {\n const { width, height } = checkBoundaries(\n startWidth + deltaX,\n startHeight + deltaY,\n )\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n else if (props.zoomType === 'fixed') {\n const aspectRatio\n = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n let newWidth = startWidth + deltaX\n let newHeight = newWidth / aspectRatio\n const { width, height } = checkBoundaries(newWidth, newHeight)\n if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n newHeight = containerBoxRef.value?.clientHeight || Infinity\n newWidth = newHeight * aspectRatio\n }\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n }\n else if (dargPoint.value === 'top-left') {\n if (props.zoomType === 'free') {\n const { width, height } = checkBoundaries(\n startWidth - deltaX,\n startHeight - deltaY,\n )\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n else if (props.zoomType === 'fixed') {\n const aspectRatio\n = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n let newWidth = startWidth - deltaX\n let newHeight = newWidth / aspectRatio\n const { width, height } = checkBoundaries(newWidth, newHeight)\n if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n newHeight = containerBoxRef.value?.clientHeight || Infinity\n newWidth = newHeight * aspectRatio\n }\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n x.value = customStyle.value.left\n y.value = customStyle.value.top\n }\n else if (dargPoint.value === 'top-right') {\n if (props.zoomType === 'free') {\n const { width, height } = checkBoundaries(\n startWidth + deltaX,\n startHeight - deltaY,\n )\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n else if (props.zoomType === 'fixed') {\n const aspectRatio\n = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n let newWidth = startWidth + deltaX\n let newHeight = newWidth / aspectRatio\n const { width, height } = checkBoundaries(newWidth, newHeight)\n if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n newHeight = containerBoxRef.value?.clientHeight || Infinity\n newWidth = newHeight * aspectRatio\n }\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n x.value = customStyle.value.left\n y.value = customStyle.value.top\n }\n else if (dargPoint.value === 'bottom-left') {\n if (props.zoomType === 'free') {\n const { width, height } = checkBoundaries(\n startWidth - deltaX,\n startHeight + deltaY,\n )\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n else if (props.zoomType === 'fixed') {\n const aspectRatio\n = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n let newWidth = startWidth - deltaX\n let newHeight = newWidth / aspectRatio\n const { width, height } = checkBoundaries(newWidth, newHeight)\n if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n newHeight = containerBoxRef.value?.clientHeight || Infinity\n newWidth = newHeight * aspectRatio\n }\n cropInfo.value.width = width\n cropInfo.value.height = height\n }\n x.value = customStyle.value.left\n y.value = customStyle.value.top\n }\n e.preventDefault()\n e.stopPropagation()\n}\n\nfunction mousedown(e: MouseEvent, point: string) {\n dargPoint.value = point\n startX = e.clientX\n startY = e.clientY\n startWidth = cropInfo.value.width\n startHeight = cropInfo.value.height\n\n if (point === 'bottom-right') {\n cropInfo.value.x = x.value\n cropInfo.value.y = y.value\n }\n else if (point === 'top-left') {\n cropInfo.value.x = x.value + width.value\n cropInfo.value.y = y.value + height.value\n }\n else if (point === 'top-right') {\n cropInfo.value.x = x.value\n cropInfo.value.y = y.value + height.value\n }\n else if (point === 'bottom-left') {\n cropInfo.value.x = x.value + width.value\n cropInfo.value.y = y.value\n }\n}\n\nfunction mouseup() {\n dargPoint.value = ''\n}\n\nfunction resize() {\n cropInfo.value.width = props.defaultWidth\n cropInfo.value.height = props.defaultHeight\n x.value = 0\n y.value = 0\n}\n\ndocument.addEventListener('mouseup', mouseup)\ndocument.addEventListener('mousemove', mousemove)\n\nonMounted(() => {\n nextTick(() => {\n // 初始化位置\n initialValue.value.x\n = (containerBoxRef.value?.offsetWidth || 0) / 2 - cropInfo.value.width / 2\n initialValue.value.y\n = (containerBoxRef.value?.offsetHeight || 0) / 2\n - cropInfo.value.height / 2\n })\n})\n\nonUnmounted(() => {\n if (imageUrl.value) {\n URL.revokeObjectURL(imageUrl.value)\n }\n document.removeEventListener('mouseup', mouseup)\n document.removeEventListener('mousemove', mousemove)\n})\n\ndefineExpose({\n crop,\n resize,\n})\n</script>\n\n<template>\n <div ref=\"containerBoxRef\" :class=\"[ns.e('img-box')]\">\n <div v-if=\"errorMessage\" :class=\"[ns.e('error-message')]\">\n {{ errorMessage }}\n </div>\n <template v-else>\n <img\n ref=\"imgRef\"\n :class=\"[ns.e('image')]\"\n :src=\"imageUrl\"\n >\n <div\n ref=\"cropBoxRef\"\n :class=\"[ns.e('crop-tool-box')]\"\n :style=\"[\n sizeStyle,\n dargPoint\n ? `left: ${customStyle.left}px;top: ${customStyle.top}px`\n : style,\n ]\"\n >\n <div\n :class=\"[ns.e('top-left')]\"\n @mousedown=\"mousedown($event, 'top-left')\"\n />\n <div\n :class=\"[ns.e('top-right')]\"\n @mousedown=\"mousedown($event, 'top-right')\"\n />\n <div\n :class=\"[ns.e('bottom-right')]\"\n @mousedown=\"mousedown($event, 'bottom-right')\"\n />\n <div\n :class=\"[ns.e('bottom-left')]\"\n @mousedown=\"mousedown($event, 'bottom-left')\"\n />\n </div>\n </template>\n </div>\n</template>\n"],"names":["props","__props","startX","startY","startWidth","startHeight","ns","useNamespace","cropBoxRef","ref","containerBoxRef","imgRef","errorMessage","dargPoint","initialValue","x","y","cropInfo","width","defaultWidth","height","defaultHeight","useElementSize","imgWidth","style","useDraggable","containerElement","draggingElement","disabled","computed","value","exact","imageUrl","imgFile","URL","createObjectURL","watch","newFile","type","startsWith","ratio","naturalWidth","customStyle","position","left","top","sizeStyle","aspectRatio","zoomType","cssVarBlock","zoom","pixel","checkBoundaries","newWidth","newHeight","maxWidth","clientWidth","Infinity","maxHeight","clientHeight","Math","min","max","mousemove","e","deltaX","clientX","deltaY","clientY","Number","parseFloat","split","preventDefault","stopPropagation","mousedown","point","mouseup","document","addEventListener","onMounted","nextTick","offsetWidth","offsetHeight","onUnmounted","revokeObjectURL","removeEventListener","__expose","crop","async","img","backgroundColor","window","getComputedStyle","canvas","createElement","drawImage","cropCanvas","drawColor","useCanvas","offsetLeft","offsetTop","naturalHeight","resize"],"mappings":"4fASA,MAAMA,EAAQC,EA0Bd,IAAIC,EAAS,EACTC,EAAS,EACTC,EAAa,EACbC,EAAc,EAEZ,MAAAC,EAAKC,eAAa,mBAElBC,EAAaC,MAAwB,MACrCC,EAAkBD,MAAwB,MAC1CE,EAASF,MAA6B,MACtCG,EAAeH,MAAI,IACnBI,EAAYJ,MAAI,IAChBK,EAAeL,EAAAA,IAAI,CACvBM,EAAG,EACHC,EAAG,IAECC,EAAWR,EAAAA,IAAI,CACnBS,MAAOlB,EAAMmB,aACbC,OAAQpB,EAAMqB,cACdN,EAAG,EACHC,EAAG,KAGCE,MAAEA,EAAAE,OAAOA,GAAWE,EAAAA,eAAed,IACjCU,MAAOK,GAAaD,EAAAA,eAAeX,IAErCI,EAAEA,EAAGC,EAAAA,EAAAQ,MAAGA,GAAUC,EAAAA,aAAajB,EAAY,CAC/CkB,iBAAkBhB,EAClBiB,gBAAiBnB,EACjBoB,SAAUC,EAAAA,UAAS,MAAQhB,EAAUiB,QACrCC,OAAO,EACPjB,iBAGIkB,EAAWH,EAAAA,UAAS,IACnB7B,EAAMiC,QAGJC,IAAIC,gBAAgBnC,EAAMiC,SAFxB,KAKXG,EAAAA,OACE,IAAMpC,EAAMiC,UACXI,IACKA,IAAYA,EAAQC,KAAKC,WAAW,UACtC3B,EAAakB,MAAQ,SAGrBlB,EAAakB,MAAQ,EAAA,IAKrB,MAAAU,EAAQX,EAAAA,UAAS,KACblB,EAAOmB,OAAOW,cAAgB,GAAKlB,EAASO,QAGhDY,EAAcb,EAAAA,UAAS,KAC3B,MAAMc,EAAW,CACfC,KAAM,EACNC,IAAK,GAkBA,MAhBiB,iBAApBhC,EAAUiB,OACHa,EAAAC,KAAO3B,EAASa,MAAMf,EACtB4B,EAAAE,IAAM5B,EAASa,MAAMd,GAEH,aAApBH,EAAUiB,OACjBa,EAASC,KAAO3B,EAASa,MAAMf,EAAIG,EAAMY,MACzCa,EAASE,IAAM5B,EAASa,MAAMd,EAAII,EAAOU,OAEd,cAApBjB,EAAUiB,OACjBa,EAASE,IAAM5B,EAASa,MAAMd,EAAII,EAAOU,MAChCa,EAAAC,KAAO3B,EAASa,MAAMf,GAEJ,gBAApBF,EAAUiB,QACjBa,EAASC,KAAO3B,EAASa,MAAMf,EAAIG,EAAMY,MAChCa,EAAAE,IAAM5B,EAASa,MAAMd,GAEzB2B,CAAA,IAGHG,EAAYjB,EAAAA,UAAS,KACnB,MAAAkB,YAAEA,GAAgB/C,EAElBwB,EAMF,CACFN,MAAS,GAAGD,EAASa,MAAMZ,OAASlB,EAAMmB,eAC1CC,OAAU,GAAGH,EAASa,MAAMV,QAAUpB,EAAMqB,gBAC5C,eAAgB0B,EAChBF,IAAO,GAAGH,EAAYZ,MAAMe,QAC5BD,KAAQ,GAAGF,EAAYZ,MAAMc,UAQxB,MANgB,SAAnB5C,EAAMgD,gBACDxB,EAAM,gBAEa,UAAnBxB,EAAMgD,iBACNxB,EAAMJ,OAERd,EAAG2C,YAAYzB,EAAK,IAG7B,SAAS0B,EAAKC,GACZ,OAAOA,EAAQX,EAAMV,KAAA,CA6Bd,SAAAsB,EACPC,EACAC,GAEM,MAAAC,EAAW7C,EAAgBoB,OAAO0B,aAAeC,IACjDC,EAAYhD,EAAgBoB,OAAO6B,cAAgBF,IAElD,MAAA,CACLvC,MAAO0C,KAAKC,IAAID,KAAKE,IAAIT,EAAU,GAAIE,GACvCnC,OAAQwC,KAAKC,IAAID,KAAKE,IAAIR,EAAW,GAAII,GAC3C,CAGF,SAASK,EAAUC,GACX,MAAAC,EAASD,EAAEE,QAAUhE,EACrBiE,EAASH,EAAEI,QAAUjE,EAEvB,GAAoB,iBAApBU,EAAUiB,OACR,GAAmB,SAAnB9B,EAAMgD,SAAqB,CAC7B,MAAQ9B,MAAAA,EAAOE,OAAAA,GAAWgC,EACxBhD,EAAa6D,EACb5D,EAAc8D,GAEhBlD,EAASa,MAAMZ,MAAQA,EACvBD,EAASa,MAAMV,OAASA,CAAA,MAC1B,GAC4B,UAAnBpB,EAAMgD,SAAsB,CACnC,MAAMD,EACFsB,OAAOC,WAAWtE,EAAM+C,YAAYwB,MAAM,OAAO,IACjDF,OAAOC,WAAWtE,EAAM+C,YAAYwB,MAAM,OAAO,IACrD,IAAIlB,EAAWjD,EAAa6D,EACxBX,EAAYD,EAAWN,EACrB,MAAE7B,MAAAA,EAAOE,OAAAA,GAAWgC,EAAgBC,EAAUC,GAChDlC,GAAUV,EAAgBoB,OAAO6B,cAAgBF,OACvCH,EAAA5C,EAAgBoB,OAAO6B,cAAgBF,IACnDJ,EAAWC,EAAYP,GAEzB9B,EAASa,MAAMZ,MAAQA,EACvBD,EAASa,MAAMV,OAASA,CAAA,OAE5B,GAC6B,aAApBP,EAAUiB,MAAsB,CACnC,GAAmB,SAAnB9B,EAAMgD,SAAqB,CAC7B,MAAQ9B,MAAAA,EAAOE,OAAAA,GAAWgC,EACxBhD,EAAa6D,EACb5D,EAAc8D,GAEhBlD,EAASa,MAAMZ,MAAQA,EACvBD,EAASa,MAAMV,OAASA,CAAA,MAC1B,GAC4B,UAAnBpB,EAAMgD,SAAsB,CACnC,MAAMD,EACFsB,OAAOC,WAAWtE,EAAM+C,YAAYwB,MAAM,OAAO,IACjDF,OAAOC,WAAWtE,EAAM+C,YAAYwB,MAAM,OAAO,IACrD,IAAIlB,EAAWjD,EAAa6D,EACxBX,EAAYD,EAAWN,EACrB,MAAE7B,MAAAA,EAAOE,OAAAA,GAAWgC,EAAgBC,EAAUC,GAChDlC,GAAUV,EAAgBoB,OAAO6B,cAAgBF,OACvCH,EAAA5C,EAAgBoB,OAAO6B,cAAgBF,IACnDJ,EAAWC,EAAYP,GAEzB9B,EAASa,MAAMZ,MAAQA,EACvBD,EAASa,MAAMV,OAASA,CAAA,CAExBL,EAAAe,MAAQY,EAAYZ,MAAMc,KAC1B5B,EAAAc,MAAQY,EAAYZ,MAAMe,GAAA,MAC9B,GAC6B,cAApBhC,EAAUiB,MAAuB,CACpC,GAAmB,SAAnB9B,EAAMgD,SAAqB,CAC7B,MAAQ9B,MAAAA,EAAOE,OAAAA,GAAWgC,EACxBhD,EAAa6D,EACb5D,EAAc8D,GAEhBlD,EAASa,MAAMZ,MAAQA,EACvBD,EAASa,MAAMV,OAASA,CAAA,MAC1B,GAC4B,UAAnBpB,EAAMgD,SAAsB,CACnC,MAAMD,EACFsB,OAAOC,WAAWtE,EAAM+C,YAAYwB,MAAM,OAAO,IACjDF,OAAOC,WAAWtE,EAAM+C,YAAYwB,MAAM,OAAO,IACrD,IAAIlB,EAAWjD,EAAa6D,EACxBX,EAAYD,EAAWN,EACrB,MAAE7B,MAAAA,EAAOE,OAAAA,GAAWgC,EAAgBC,EAAUC,GAChDlC,GAAUV,EAAgBoB,OAAO6B,cAAgBF,OACvCH,EAAA5C,EAAgBoB,OAAO6B,cAAgBF,IACnDJ,EAAWC,EAAYP,GAEzB9B,EAASa,MAAMZ,MAAQA,EACvBD,EAASa,MAAMV,OAASA,CAAA,CAExBL,EAAAe,MAAQY,EAAYZ,MAAMc,KAC1B5B,EAAAc,MAAQY,EAAYZ,MAAMe,GAAA,MAC9B,GAC6B,gBAApBhC,EAAUiB,MAAyB,CACtC,GAAmB,SAAnB9B,EAAMgD,SAAqB,CAC7B,MAAQ9B,MAAAA,EAAOE,OAAAA,GAAWgC,EACxBhD,EAAa6D,EACb5D,EAAc8D,GAEhBlD,EAASa,MAAMZ,MAAQA,EACvBD,EAASa,MAAMV,OAASA,CAAA,MAC1B,GAC4B,UAAnBpB,EAAMgD,SAAsB,CACnC,MAAMD,EACFsB,OAAOC,WAAWtE,EAAM+C,YAAYwB,MAAM,OAAO,IACjDF,OAAOC,WAAWtE,EAAM+C,YAAYwB,MAAM,OAAO,IACrD,IAAIlB,EAAWjD,EAAa6D,EACxBX,EAAYD,EAAWN,EACrB,MAAE7B,MAAAA,EAAOE,OAAAA,GAAWgC,EAAgBC,EAAUC,GAChDlC,GAAUV,EAAgBoB,OAAO6B,cAAgBF,OACvCH,EAAA5C,EAAgBoB,OAAO6B,cAAgBF,IACnDJ,EAAWC,EAAYP,GAEzB9B,EAASa,MAAMZ,MAAQA,EACvBD,EAASa,MAAMV,OAASA,CAAA,CAExBL,EAAAe,MAAQY,EAAYZ,MAAMc,KAC1B5B,EAAAc,MAAQY,EAAYZ,MAAMe,GAAA,CAE9BmB,EAAEQ,iBACFR,EAAES,iBAAgB,CAGX,SAAAC,EAAUV,EAAeW,GAChC9D,EAAUiB,MAAQ6C,EAClBzE,EAAS8D,EAAEE,QACX/D,EAAS6D,EAAEI,QACXhE,EAAaa,EAASa,MAAMZ,MAC5Bb,EAAcY,EAASa,MAAMV,OAEf,iBAAVuD,GACO1D,EAAAa,MAAMf,EAAIA,EAAEe,MACZb,EAAAa,MAAMd,EAAIA,EAAEc,OAEJ,aAAV6C,GACP1D,EAASa,MAAMf,EAAIA,EAAEe,MAAQZ,EAAMY,MACnCb,EAASa,MAAMd,EAAIA,EAAEc,MAAQV,EAAOU,OAEnB,cAAV6C,GACE1D,EAAAa,MAAMf,EAAIA,EAAEe,MACrBb,EAASa,MAAMd,EAAIA,EAAEc,MAAQV,EAAOU,OAEnB,gBAAV6C,IACP1D,EAASa,MAAMf,EAAIA,EAAEe,MAAQZ,EAAMY,MAC1Bb,EAAAa,MAAMd,EAAIA,EAAEc,MACvB,CAGF,SAAS8C,IACP/D,EAAUiB,MAAQ,EAAA,QAUX+C,SAAAC,iBAAiB,UAAWF,GAC5BC,SAAAC,iBAAiB,YAAaf,GAEvCgB,EAAAA,WAAU,KACRC,EAAAA,UAAS,KAEMlE,EAAAgB,MAAMf,GACdL,EAAgBoB,OAAOmD,aAAe,GAAK,EAAIhE,EAASa,MAAMZ,MAAQ,EAC9DJ,EAAAgB,MAAMd,GACdN,EAAgBoB,OAAOoD,cAAgB,GAAK,EAC7CjE,EAASa,MAAMV,OAAS,CAAA,GAC7B,IAGH+D,EAAAA,aAAY,KACNnD,EAASF,OACPI,IAAAkD,gBAAgBpD,EAASF,OAEtB+C,SAAAQ,oBAAoB,UAAWT,GAC/BC,SAAAQ,oBAAoB,YAAatB,EAAS,IAGxCuB,EAAA,CACXC,KAjNaC,eAAKC,EAAwB9E,EAAOmB,OACjD,IAAI4D,EAAkB,cAClBhF,EAAgBoB,QAClB4D,EAAkBC,OAAOC,iBACvBlF,EAAgBoB,OAChB4D,iBAEE,MAAAG,EAAShB,SAASiB,cAAc,UACtCD,EAAO3E,MAAQgC,EAAKxC,EAAgBoB,OAAO0B,aAAe,GAC1DqC,EAAOzE,OAAS8B,EAAKxC,EAAgBoB,OAAO6B,cAAgB,GAC5D,MAAMoC,UAAEA,EAAWC,WAAAA,EAAAC,UAAYA,GAAcC,EAAAA,UAAUL,GASvD,OARAI,EAAU,EAAG,EAAGJ,EAAO3E,MAAO2E,EAAOzE,OAAQsE,GAC7CK,EACEN,EACAvC,EAAKuC,EAAIU,YACTjD,EAAKuC,EAAIW,WACTX,EAAIhD,aACJgD,EAAIY,qBAEOL,EACX9C,EAAKnC,EAAEe,OACPoB,EAAKlC,EAAEc,OACPoB,EAAKhC,EAAMY,OACXoB,EAAK9B,EAAOU,OACd,EA0LAwE,OA/BF,WACWrF,EAAAa,MAAMZ,MAAQlB,EAAMmB,aACpBF,EAAAa,MAAMV,OAASpB,EAAMqB,cAC9BN,EAAEe,MAAQ,EACVd,EAAEc,MAAQ,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../../../../packages/components/src/subject-list/index.ts"],"sourcesContent":["import { withInstall } from '../withInstall'\nimport component from './src/subject-list.vue'\n\nconst QxsSubjectList = withInstall(component)\n\nexport {\n QxsSubjectList\n}\n\nexport default QxsSubjectList"],"names":["QxsSubjectList","withInstall","component","default"],"mappings":"gJAGA,MAAMA,EAAiBC,cAAYC,EAASC"}
1
+ {"version":3,"file":"index.cjs","sources":["../../../../../packages/components/src/subject-list/index.ts"],"sourcesContent":["import { withInstall } from '../withInstall'\nimport component from './src/subject-list.vue'\n\nconst QxsSubjectList = withInstall(component)\n\nexport {\n QxsSubjectList,\n}\n\nexport default QxsSubjectList\n"],"names":["QxsSubjectList","withInstall","component","default"],"mappings":"gJAGA,MAAMA,EAAiBC,cAAYC,EAASC"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("element-plus/es"),t=require("vue"),l=require("@element-plus/icons-vue"),a=require("@qxs-bns/hooks"),r=require("../../../subject-action/src/subject-action.vue.cjs"),n=require("../../../subject-layout/src/subject-layout.vue.cjs"),o=require("../../../tiny-mce-editor/src/tiny-mce-editor.vue.cjs"),i=require("@qxs-bns/utils"),s=require("element-plus");const u={class:"preview"},d={class:"title"},c={key:0},m={key:1},p={key:0},f=["innerHTML"],v={class:"preview-answer"},y={class:"order"},x={class:"order"},C={style:{flex:"1"}},k={class:"margin-bottom flex flex-items-center"},V={class:"margin-bottom answer-list"},w={class:"order"},h={key:0,class:"margin-bottom flex flex-items-center"},g={style:{flex:"1"}},E={key:1,class:"flex"},N={style:{flex:"1"}},B={key:2,class:"margin-bottom flex"},S={style:{flex:"1"}},b={class:"flex flex-justify-end"};var q=t.defineComponent({name:"QxsSubjectSingle",__name:"subject-single",props:{orderIndex:{type:Number,required:!0},title:{type:String,required:!1},isSave:{type:Boolean,required:!0},showAction:{type:Boolean,required:!1},type:{type:String,required:!0},isEdit:{type:Boolean,required:!0},isSet:{type:Boolean,required:!0},answerList:{type:null,required:!1},leastAnswerCount:{type:Number,required:!1},analysis:{type:String,required:!1},examExpand:{type:String,required:!1},examRichTextContent:{type:String,required:!1},showAnalysis:{type:Boolean,required:!1},examAnswerRelationType:{type:Number,required:!1},customId:{type:Number,required:!1},examId:{type:Number,required:!1},isKey:{type:Boolean,required:!0},answerCheckType:{type:Number,required:!0}},emits:["move","save","delete","edit","add","setRelation"],setup(q,{emit:T}){const A=q,R=T,_=t.useAttrs(),j=t.ref(0),D=t.ref(!1),I=t.ref(1),L=t.ref(1),M=t.ref([{title:"",isCorrect:!1},{title:"",isCorrect:!1},{title:"",isCorrect:!1},{title:"",isCorrect:!1}]),U=t.ref(),z=t.ref(""),K=t.ref(""),$=t.ref(!1),F=t.ref(""),P=t.ref(0),O=t.ref(!1),G=t.ref(""),H=t.computed((()=>"single"===A.type?"单选题":"multiple"===A.type?"多选题":"排序题")),Q=t.ref([]),J=t.computed((()=>{const e=[];for(let t=M.value.length;t>1;t--)e.push({label:`至少选择${t}项`,value:t});return e.reverse()}));function W(){A.isSave||M.value.push({title:"",isCorrect:!1,customAnswerId:i.setGuid()})}function X(){$.value=!1,F.value=""}function Y(){if(!z.value)return void s.ElMessage.error("题目标题不能为空!");let e="",t=!1,l=0;if("multiple"===A.type||"single"===A.type?M.value.forEach(((a,r)=>{a.title||(e+=`选项${String.fromCharCode(65+r)}未填写。`),a.isCorrect&&(t=!0,l++)})):"sort"===A.type&&Q.value.length&&(t=!0),e)return void s.ElMessage.error(e);if(new Set(M.value.map((e=>e.title))).size===M.value.length){if("multiple"===A.type){if(1===l)return void s.ElMessage.error("请至少设置两个支持选项");if(t&&l<U.value)return void s.ElMessage.error("至少选几项与支持选项数不符")}console.log(I.value,111),2!==I.value&&3!==I.value||t?R("save",{title:z.value,answers:M.value.map(((e,t)=>({...e,orderIndex:t+1}))),examExpand:Q.value.map((e=>e.charCodeAt(0)-65+1)).join(","),analysis:K.value,isSetCorrectAnswer:t,leastAnswerCount:U.value,examRichTextContent:$.value?F.value:"",examAnswerRelationType:L.value,isKey:D.value,answerCheckType:I.value}):s.ElMessage.error("请设置支持选项")}else s.ElMessage.error("选项不能重复")}function Z(){M.value[j.value].resultItem=G.value||"",O.value=!1}function ee(){O.value=!1,G.value=""}function te(e){D.value=e}function le(e){I.value=e}function ae(e,t){R("add",e,t?A.examAnswerRelationType:null)}t.watch((()=>A.isEdit),(()=>{A.isEdit&&(P.value=(new Date).getTime())}));const re=t.computed((()=>e=>{let t=0;return e.forEach((e=>{e.relationAnswers&&(t+=e.relationAnswers.length)})),t})),ne=a.useNamespace("subject-single");return t.onMounted((function(){if(A.title&&(z.value=A.title),A.answerCheckType&&(I.value=A.answerCheckType),A.isKey&&(D.value=A.isKey),A.examAnswerRelationType&&(L.value=A.examAnswerRelationType),A.answerList&&A.answerList.length&&(M.value=A.answerList),A.leastAnswerCount&&(U.value=A.leastAnswerCount),A.examExpand&&A.examExpand){const e=A.examExpand.split(",");Q.value=e.map((e=>{const t=A.answerList.find((t=>t.answerId?.toString()===e));return t?String.fromCharCode(65+t.orderIndex-1):e})).filter(Boolean)}A.analysis&&(K.value=A.analysis),A.examRichTextContent&&(F.value=A.examRichTextContent,$.value=!0)})),(a,s)=>{const q=e.ElCheckbox,T=e.ElRadio,P=e.ElInput,oe=e.ElOption,ie=e.ElSelect,se=e.ElIcon,ue=e.ElLink,de=e.ElButton,ce=e.ElDialog;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(t.unref(ne).e("single-exam"))},[t.createVNode(n.default,{"show-edit":a.isEdit},t.createSlots({preview:t.withCtx((()=>[t.createElementVNode("div",u,[t.createElementVNode("div",null,[t.createElementVNode("span",d,[t.createTextVNode(t.toDisplayString(a.orderIndex+1)+"."+t.toDisplayString(t.unref(z))+" ",1),"single"===a.type?(t.openBlock(),t.createElementBlock("span",c,"(单选题)")):["multiple","sort"].includes(a.type)?(t.openBlock(),t.createElementBlock("span",m," ("+t.toDisplayString(t.unref(H))+t.toDisplayString(t.unref(U)?`至少选${t.unref(U)}项${"sort"===a.type?"并排序":""}`:"")+") ",1)):t.createCommentVNode("v-if",!0)])]),t.unref($)?(t.openBlock(),t.createElementBlock("div",p,[t.createElementVNode("div",{innerHTML:t.unref(F)},null,8,f)])):t.createCommentVNode("v-if",!0),t.createElementVNode("div",v,["sort"===a.type?(t.openBlock(!0),t.createElementBlock(t.Fragment,{key:0},t.renderList(t.unref(M),((e,l)=>(t.openBlock(),t.createBlock(q,{key:l,class:"radio",disabled:!0},{default:t.withCtx((()=>[t.createElementVNode("span",y,t.toDisplayString(String.fromCharCode(65+l))+". ",1),t.createTextVNode(" "+t.toDisplayString(e.title),1)])),_:2},1024)))),128)):(t.openBlock(!0),t.createElementBlock(t.Fragment,{key:1},t.renderList(t.unref(M),((e,l)=>(t.openBlock(),t.createBlock(T,{key:l,class:"radio",value:"disabled",disabled:""},{default:t.withCtx((()=>[t.createElementVNode("span",x,t.toDisplayString(String.fromCharCode(65+l))+". ",1),t.createTextVNode(" "+t.toDisplayString(e.title)+" "+t.toDisplayString(e.isCorrect?"(支持选项)":"")+" "+t.toDisplayString(1===t.unref(L)?e.resultItem?"(已设置结果项)":"(未设置结果项)":"")+" "+t.toDisplayString(2===t.unref(L)?e.answerRelations?.length?"(已设置关联)":"(未设置关联)":""),1)])),_:2},1024)))),128))])])])),default:t.withCtx((()=>[a.showAction?(t.openBlock(),t.createBlock(r.default,{key:0,"is-edit":a.isEdit,"is-set":a.isSet,isKey:t.unref(D),examAnswerRelationType:A.examAnswerRelationType,answerCheckType:t.unref(I),onMoveUp:s[5]||(s[5]=e=>R("move","up")),onMoveDown:s[6]||(s[6]=e=>R("move","down")),onDelete:s[7]||(s[7]=e=>R("delete")),onSave:Y,onEdit:s[8]||(s[8]=e=>R("edit")),onAdd:ae,onOnShowRichText:s[9]||(s[9]=e=>$.value=!0),onSetKey:te,onSetAnswerSetting:le},null,8,["is-edit","is-set","isKey","examAnswerRelationType","answerCheckType"])):t.createCommentVNode("v-if",!0)])),_:2},[a.isEdit?{name:"edit",fn:t.withCtx((()=>[t.createElementVNode("div",{class:t.normalizeClass(["flex",[{"margin-bottom":t.unref($)}]])},[s[12]||(s[12]=t.createElementVNode("div",{class:"label flex flex-justify-center"},[t.createElementVNode("span",null,"题目:")],-1)),t.createElementVNode("div",C,[t.createVNode(P,{modelValue:t.unref(z),"onUpdate:modelValue":s[0]||(s[0]=e=>t.isRef(z)?z.value=e:null),type:"textarea",rows:2,placeholder:`【${t.unref(H)}】请输入问题`,disabled:a.isSave,"show-word-limit":"",maxlength:"200",class:"margin-bottom"},null,8,["modelValue","placeholder","disabled"])])],2),t.createElementVNode("div",k,[s[13]||(s[13]=t.createElementVNode("div",{class:"label flex flex-justify-center"},[t.createElementVNode("span",null,"设置:")],-1)),["multiple","sort"].includes(a.type)?(t.openBlock(),t.createBlock(ie,{key:0,modelValue:t.unref(U),"onUpdate:modelValue":s[1]||(s[1]=e=>t.isRef(U)?U.value=e:null),style:{width:"150px"},placeholder:"至少选择几项",disabled:a.isSave},{default:t.withCtx((()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(J),(e=>(t.openBlock(),t.createBlock(oe,{key:e.value,value:e.value,label:e.label},null,8,["value","label"])))),128))])),_:1},8,["modelValue","disabled"])):t.createCommentVNode("v-if",!0)]),t.createElementVNode("div",V,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(M),((e,r)=>(t.openBlock(),t.createElementBlock("div",{key:r,class:"answer-item flex flex-items-center"},[t.createElementVNode("span",w,t.toDisplayString(String.fromCharCode(65+r))+".",1),t.createVNode(P,{modelValue:e.title,"onUpdate:modelValue":t=>e.title=t,class:"input","show-word-limit":"",maxlength:"100",placeholder:`选项${String.fromCharCode(65+r)}`,disabled:a.isSave},null,8,["modelValue","onUpdate:modelValue","placeholder","disabled"]),["single","multiple"].includes(a.type)?(t.openBlock(),t.createBlock(q,{key:0,modelValue:e.isCorrect,"onUpdate:modelValue":t=>e.isCorrect=t,class:t.normalizeClass([{"is-correct":e.isCorrect}]),disabled:a.isSave,style:{"margin-left":"10px"},onChange:t=>function(e,t){"single"===A.type?(t&&M.value.forEach((t=>{t!==e&&(t.isCorrect=!1)})),e.isCorrect=t):"multiple"===A.type&&(e.isCorrect=t)}(e,t)},{default:t.withCtx((()=>[...s[14]||(s[14]=[t.createTextVNode(" 支持选项 ")])])),_:2},1032,["modelValue","onUpdate:modelValue","class","disabled","onChange"])):t.createCommentVNode("v-if",!0),t.createVNode(se,{class:"icon"},{default:t.withCtx((()=>[t.createVNode(t.unref(l.CirclePlus),{class:t.normalizeClass([{disabled:a.isSave}]),onClick:W},null,8,["class"])])),_:1}),t.createVNode(se,{class:"icon"},{default:t.withCtx((()=>[t.createVNode(t.unref(l.Remove),{class:t.normalizeClass([{disabled:t.unref(M).length<3||a.isSave}]),onClick:e=>function(e){M.value.length<3||A.isSave||M.value.splice(e,1)}(r)},null,8,["class","onClick"])])),_:2},1024),1===t.unref(L)?(t.openBlock(),t.createBlock(ue,{key:1,type:"primary",class:"margin-left-10",onClick:e=>{return t=r,j.value=t,G.value=M.value[t].resultItem||"",void(O.value=!0);var t}},{default:t.withCtx((()=>[t.createElementVNode("span",null,t.toDisplayString(e.resultItem?"编辑结果":"添加结果"),1)])),_:2},1032,["onClick"])):t.createCommentVNode("v-if",!0),2===t.unref(L)?(t.openBlock(),t.createBlock(ue,{key:2,type:"primary",class:"margin-left-10",onClick:t=>function(e){e.customAnswerId=e.examAnswerId||i.setGuid(),R("setRelation",A.customId,e)}(e)},{default:t.withCtx((()=>[t.createElementVNode("span",null,t.toDisplayString(e.answerRelations?.length?`关联了${t.unref(re)(e.answerRelations)}项`:"关联检查"),1)])),_:2},1032,["onClick"])):t.createCommentVNode("v-if",!0)])))),128))]),"sort"===a.type?(t.openBlock(),t.createElementBlock("div",h,[s[15]||(s[15]=t.createElementVNode("div",{class:"label flex flex-justify-end"},[t.createElementVNode("span",null,"排序答案:")],-1)),t.createElementVNode("div",g,[t.createVNode(ie,{modelValue:t.unref(Q),"onUpdate:modelValue":s[2]||(s[2]=e=>t.isRef(Q)?Q.value=e:null),mode:"multiple",style:{width:"360px"},placeholder:"请按顺序选择排序答案","show-arrow":!0},{default:t.withCtx((()=>[t.createCommentVNode(' :options="[...Array(answers.length)].map((_, i) => ({ value: String.fromCharCode(65 + i) }))" '),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(M),((e,l)=>(t.openBlock(),t.createBlock(oe,{key:l,label:e.title,value:String.fromCharCode(65+l)},null,8,["label","value"])))),128))])),_:1},8,["modelValue"])])])):t.createCommentVNode("v-if",!0),a.showAnalysis?(t.openBlock(),t.createElementBlock("div",E,[s[16]||(s[16]=t.createElementVNode("div",{class:"label flex flex-justify-center"},[t.createElementVNode("span",null,"解析:")],-1)),t.createElementVNode("div",N,[t.createVNode(P,{modelValue:t.unref(K),"onUpdate:modelValue":s[3]||(s[3]=e=>t.isRef(K)?K.value=e:null),type:"textarea",rows:2,placeholder:"请输入题目解析"},null,8,["modelValue"])])])):t.createCommentVNode("v-if",!0),t.unref($)?(t.openBlock(),t.createElementBlock("div",B,[s[18]||(s[18]=t.createElementVNode("div",{class:"label flex flex-justify-center"},[t.createElementVNode("span",null,"富文本:")],-1)),t.createElementVNode("div",S,[t.createVNode(o.default,t.mergeProps({"model-value":t.unref(F),"onUpdate:modelValue":s[4]||(s[4]=e=>t.isRef(F)?F.value=e:null)},t.unref(_),{style:{width:"100%"}}),null,16,["model-value"]),t.createElementVNode("div",b,[t.createVNode(ue,{type:"danger",onClick:X},{default:t.withCtx((()=>s[17]||(s[17]=[t.createTextVNode(" 删除富文本 ")]))),_:1})])])])):t.createCommentVNode("v-if",!0)])),key:"0"}:void 0]),1032,["show-edit"]),t.createVNode(ce,{modelValue:t.unref(O),"onUpdate:modelValue":s[11]||(s[11]=e=>t.isRef(O)?O.value=e:null),title:"添加结果",class:"customize-dialog"},{footer:t.withCtx((()=>[t.createVNode(de,{class:"customize-button",type:"primary",plain:"",onClick:ee},{default:t.withCtx((()=>s[19]||(s[19]=[t.createTextVNode(" 取消 ")]))),_:1}),t.createVNode(de,{class:"customize-button",type:"primary",plain:"",onClick:Z},{default:t.withCtx((()=>s[20]||(s[20]=[t.createTextVNode(" 保存 ")]))),_:1})])),default:t.withCtx((()=>[(t.openBlock(),t.createBlock(o.default,t.mergeProps({key:t.unref(j),"model-value":t.unref(G),"onUpdate:modelValue":s[10]||(s[10]=e=>t.isRef(G)?G.value=e:null)},t.unref(_),{style:{width:"100%"}}),null,16,["model-value"]))])),_:1},8,["modelValue"])],2)}}});exports.default=q;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("element-plus/es"),t=require("vue"),l=require("@element-plus/icons-vue"),a=require("@qxs-bns/hooks"),r=require("../../../subject-action/src/subject-action.vue.cjs"),n=require("../../../subject-layout/src/subject-layout.vue.cjs"),o=require("../../../tiny-mce-editor/src/tiny-mce-editor.vue.cjs"),i=require("@qxs-bns/utils"),s=require("element-plus");const u={class:"preview"},d={class:"title"},c={key:0},m={key:1},p={key:0},f=["innerHTML"],v={class:"preview-answer"},y={class:"order"},x={class:"order"},C={style:{flex:"1"}},k={class:"margin-bottom flex flex-items-center"},w={class:"margin-bottom answer-list"},V={class:"order"},h={key:0,class:"margin-bottom flex flex-items-center"},g={style:{flex:"1"}},E={key:1,class:"flex"},N={style:{flex:"1"}},B={key:2,class:"margin-bottom flex"},S={style:{flex:"1"}},b={class:"flex flex-justify-end"};var T=t.defineComponent({name:"QxsSubjectSingle",__name:"subject-single",props:{orderIndex:{type:Number,required:!0},title:{type:String,required:!1},isSave:{type:Boolean,required:!0},showAction:{type:Boolean,required:!1},type:{type:String,required:!0},isEdit:{type:Boolean,required:!0},isSet:{type:Boolean,required:!0},answerList:{type:null,required:!1},leastAnswerCount:{type:Number,required:!1},analysis:{type:String,required:!1},examExpand:{type:String,required:!1},examRichTextContent:{type:String,required:!1},showAnalysis:{type:Boolean,required:!1},examAnswerRelationType:{type:Number,required:!1},customId:{type:Number,required:!1},examId:{type:Number,required:!1},isKey:{type:Boolean,required:!0},answerCheckType:{type:Number,required:!0}},emits:["move","save","delete","edit","add","setRelation"],setup(T,{emit:q}){const R=T,A=q,_=t.useAttrs(),j=t.ref(0),D=t.ref(!1),I=t.ref(1),L=t.ref(1),M=t.ref([{title:"",isCorrect:!1},{title:"",isCorrect:!1},{title:"",isCorrect:!1},{title:"",isCorrect:!1}]),U=t.ref(),z=t.ref(""),K=t.ref(""),$=t.ref(!1),F=t.ref(""),P=t.ref(0),O=t.ref(!1),G=t.ref(""),H=t.computed((()=>"single"===R.type?"单选题":"multiple"===R.type?"多选题":"排序题")),Q=t.ref([]),J=t.computed((()=>{const e=[];for(let t=M.value.length;t>1;t--)e.push({label:`至少选择${t}项`,value:t});return e.reverse()}));function W(){R.isSave||M.value.push({title:"",isCorrect:!1,customAnswerId:i.setGuid()})}function X(){$.value=!1,F.value=""}function Y(){if(!z.value)return void s.ElMessage.error("题目标题不能为空!");let e="",t=!1,l=0;if("multiple"===R.type||"single"===R.type?M.value.forEach(((a,r)=>{a.title?.trim()||(e+=`选项${String.fromCharCode(65+r)}未填写。`),a.isCorrect&&(t=!0,l++),a.examAnswerRelationType=a.resultItem?1:a.answerRelations?.length?2:null})):"sort"===R.type&&Q.value.length&&(t=!0),e)return void s.ElMessage.error(e);if(new Set(M.value.map((e=>e.title))).size===M.value.length){if("multiple"===R.type){if(1===l)return void s.ElMessage.error("请至少设置两个支持选项");if(t&&l<U.value)return void s.ElMessage.error("至少选几项与支持选项数不符")}2!==I.value&&3!==I.value||t?A("save",{title:z.value,answers:M.value.map(((e,t)=>({...e,orderIndex:t+1}))),examExpand:Q.value.map((e=>e.charCodeAt(0)-65+1)).join(","),analysis:K.value,isSetCorrectAnswer:t,leastAnswerCount:U.value,examRichTextContent:$.value?F.value:"",examAnswerRelationType:L.value,isKey:D.value,answerCheckType:I.value}):s.ElMessage.error("请设置支持选项")}else s.ElMessage.error("选项不能重复")}function Z(){M.value[j.value].resultItem=G.value||"",O.value=!1}function ee(){O.value=!1,G.value=""}function te(e){D.value=e}function le(e){I.value=e}function ae(e,t){A("add",e,t?R.examAnswerRelationType:null)}t.watch((()=>R.isEdit),(()=>{R.isEdit&&(P.value=(new Date).getTime())}));const re=t.computed((()=>e=>{let t=0;return e.forEach((e=>{e.relationAnswers&&(t+=e.relationAnswers.length)})),t})),ne=a.useNamespace("subject-single");return t.onMounted((function(){if(R.title&&(z.value=R.title),R.answerCheckType&&(I.value=R.answerCheckType),R.isKey&&(D.value=R.isKey),R.examAnswerRelationType&&(L.value=R.examAnswerRelationType),R.answerList&&R.answerList.length&&(M.value=R.answerList),R.leastAnswerCount&&(U.value=R.leastAnswerCount),R.examExpand&&R.examExpand){const e=R.examExpand.split(",");Q.value=e.map((e=>{const t=R.answerList.find((t=>t.answerId?.toString()===e));return t?String.fromCharCode(65+t.orderIndex-1):e})).filter(Boolean)}R.analysis&&(K.value=R.analysis),R.examRichTextContent&&(F.value=R.examRichTextContent,$.value=!0)})),(a,s)=>{const T=e.ElCheckbox,q=e.ElRadio,P=e.ElInput,oe=e.ElOption,ie=e.ElSelect,se=e.ElIcon,ue=e.ElLink,de=e.ElButton,ce=e.ElDialog;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(t.unref(ne).e("single-exam"))},[t.createVNode(n.default,{"show-edit":a.isEdit},t.createSlots({preview:t.withCtx((()=>[t.createElementVNode("div",u,[t.createElementVNode("div",null,[t.createElementVNode("span",d,[t.createTextVNode(t.toDisplayString(a.orderIndex+1)+"."+t.toDisplayString(t.unref(z))+" ",1),"single"===a.type?(t.openBlock(),t.createElementBlock("span",c,"(单选题)")):["multiple","sort"].includes(a.type)?(t.openBlock(),t.createElementBlock("span",m," ("+t.toDisplayString(t.unref(H))+t.toDisplayString(t.unref(U)?`至少选${t.unref(U)}项${"sort"===a.type?"并排序":""}`:"")+") ",1)):t.createCommentVNode("v-if",!0)])]),t.unref($)?(t.openBlock(),t.createElementBlock("div",p,[t.createElementVNode("div",{innerHTML:t.unref(F)},null,8,f)])):t.createCommentVNode("v-if",!0),t.createElementVNode("div",v,["sort"===a.type?(t.openBlock(!0),t.createElementBlock(t.Fragment,{key:0},t.renderList(t.unref(M),((e,l)=>(t.openBlock(),t.createBlock(T,{key:l,class:"radio",disabled:!0},{default:t.withCtx((()=>[t.createElementVNode("span",y,t.toDisplayString(String.fromCharCode(65+l))+". ",1),t.createTextVNode(" "+t.toDisplayString(e.title),1)])),_:2},1024)))),128)):(t.openBlock(!0),t.createElementBlock(t.Fragment,{key:1},t.renderList(t.unref(M),((e,l)=>(t.openBlock(),t.createBlock(q,{key:l,class:"radio",value:"disabled",disabled:""},{default:t.withCtx((()=>[t.createElementVNode("span",x,t.toDisplayString(String.fromCharCode(65+l))+". ",1),t.createTextVNode(" "+t.toDisplayString(e.title)+" "+t.toDisplayString(e.isCorrect?"(支持选项)":"")+" "+t.toDisplayString(1===t.unref(L)?e.resultItem?"(已设置结果项)":"(未设置结果项)":"")+" "+t.toDisplayString(2===t.unref(L)?e.answerRelations?.length?"(已设置关联)":"(未设置关联)":""),1)])),_:2},1024)))),128))])])])),default:t.withCtx((()=>[a.showAction?(t.openBlock(),t.createBlock(r.default,{key:0,"is-edit":a.isEdit,"is-set":a.isSet,isKey:t.unref(D),examAnswerRelationType:R.examAnswerRelationType,answerCheckType:t.unref(I),onMoveUp:s[5]||(s[5]=e=>A("move","up")),onMoveDown:s[6]||(s[6]=e=>A("move","down")),onDelete:s[7]||(s[7]=e=>A("delete")),onSave:Y,onEdit:s[8]||(s[8]=e=>A("edit")),onAdd:ae,onOnShowRichText:s[9]||(s[9]=e=>$.value=!0),onSetKey:te,onSetAnswerSetting:le},null,8,["is-edit","is-set","isKey","examAnswerRelationType","answerCheckType"])):t.createCommentVNode("v-if",!0)])),_:2},[a.isEdit?{name:"edit",fn:t.withCtx((()=>[t.createElementVNode("div",{class:t.normalizeClass(["flex",[{"margin-bottom":t.unref($)}]])},[s[12]||(s[12]=t.createElementVNode("div",{class:"label flex flex-justify-center"},[t.createElementVNode("span",null,"题目:")],-1)),t.createElementVNode("div",C,[t.createVNode(P,{modelValue:t.unref(z),"onUpdate:modelValue":s[0]||(s[0]=e=>t.isRef(z)?z.value=e:null),type:"textarea",rows:2,placeholder:`【${t.unref(H)}】请输入问题`,disabled:a.isSave,"show-word-limit":"",maxlength:"200",class:"margin-bottom"},null,8,["modelValue","placeholder","disabled"])])],2),t.createElementVNode("div",k,[s[13]||(s[13]=t.createElementVNode("div",{class:"label flex flex-justify-center"},[t.createElementVNode("span",null,"设置:")],-1)),["multiple","sort"].includes(a.type)?(t.openBlock(),t.createBlock(ie,{key:0,modelValue:t.unref(U),"onUpdate:modelValue":s[1]||(s[1]=e=>t.isRef(U)?U.value=e:null),style:{width:"150px"},placeholder:"至少选择几项",disabled:a.isSave},{default:t.withCtx((()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(J),(e=>(t.openBlock(),t.createBlock(oe,{key:e.value,value:e.value,label:e.label},null,8,["value","label"])))),128))])),_:1},8,["modelValue","disabled"])):t.createCommentVNode("v-if",!0)]),t.createElementVNode("div",w,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(M),((e,r)=>(t.openBlock(),t.createElementBlock("div",{key:r,class:"answer-item flex flex-items-center"},[t.createElementVNode("span",V,t.toDisplayString(String.fromCharCode(65+r))+".",1),t.createVNode(P,{modelValue:e.title,"onUpdate:modelValue":t=>e.title=t,class:"input","show-word-limit":"",maxlength:"100",placeholder:`选项${String.fromCharCode(65+r)}`,disabled:a.isSave},null,8,["modelValue","onUpdate:modelValue","placeholder","disabled"]),["single","multiple"].includes(a.type)?(t.openBlock(),t.createBlock(T,{key:0,modelValue:e.isCorrect,"onUpdate:modelValue":t=>e.isCorrect=t,class:t.normalizeClass([{"is-correct":e.isCorrect}]),disabled:a.isSave,style:{"margin-left":"10px"},onChange:t=>function(e,t){"single"===R.type?(t&&M.value.forEach((t=>{t!==e&&(t.isCorrect=!1)})),e.isCorrect=t):"multiple"===R.type&&(e.isCorrect=t)}(e,t)},{default:t.withCtx((()=>[...s[14]||(s[14]=[t.createTextVNode(" 支持选项 ")])])),_:2},1032,["modelValue","onUpdate:modelValue","class","disabled","onChange"])):t.createCommentVNode("v-if",!0),t.createVNode(se,{class:"icon"},{default:t.withCtx((()=>[t.createVNode(t.unref(l.CirclePlus),{class:t.normalizeClass([{disabled:a.isSave}]),onClick:W},null,8,["class"])])),_:1}),t.createVNode(se,{class:"icon"},{default:t.withCtx((()=>[t.createVNode(t.unref(l.Remove),{class:t.normalizeClass([{disabled:t.unref(M).length<3||a.isSave}]),onClick:e=>function(e){M.value.length<3||R.isSave||M.value.splice(e,1)}(r)},null,8,["class","onClick"])])),_:2},1024),1===t.unref(L)?(t.openBlock(),t.createBlock(ue,{key:1,type:"primary",class:"margin-left-10",onClick:e=>{return t=r,j.value=t,G.value=M.value[t].resultItem||"",void(O.value=!0);var t}},{default:t.withCtx((()=>[t.createElementVNode("span",null,t.toDisplayString(e.resultItem?"编辑结果":"添加结果"),1)])),_:2},1032,["onClick"])):t.createCommentVNode("v-if",!0),2===t.unref(L)?(t.openBlock(),t.createBlock(ue,{key:2,type:"primary",class:"margin-left-10",onClick:t=>function(e){e.customAnswerId=e.examAnswerId||i.setGuid(),A("setRelation",R.customId,e)}(e)},{default:t.withCtx((()=>[t.createElementVNode("span",null,t.toDisplayString(e.answerRelations?.length?`关联了${t.unref(re)(e.answerRelations)}项`:"关联检查"),1)])),_:2},1032,["onClick"])):t.createCommentVNode("v-if",!0)])))),128))]),"sort"===a.type?(t.openBlock(),t.createElementBlock("div",h,[s[15]||(s[15]=t.createElementVNode("div",{class:"label flex flex-justify-end"},[t.createElementVNode("span",null,"排序答案:")],-1)),t.createElementVNode("div",g,[t.createVNode(ie,{modelValue:t.unref(Q),"onUpdate:modelValue":s[2]||(s[2]=e=>t.isRef(Q)?Q.value=e:null),mode:"multiple",style:{width:"360px"},placeholder:"请按顺序选择排序答案","show-arrow":!0},{default:t.withCtx((()=>[t.createCommentVNode(' :options="[...Array(answers.length)].map((_, i) => ({ value: String.fromCharCode(65 + i) }))" '),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(M),((e,l)=>(t.openBlock(),t.createBlock(oe,{key:l,label:e.title,value:String.fromCharCode(65+l)},null,8,["label","value"])))),128))])),_:1},8,["modelValue"])])])):t.createCommentVNode("v-if",!0),a.showAnalysis?(t.openBlock(),t.createElementBlock("div",E,[s[16]||(s[16]=t.createElementVNode("div",{class:"label flex flex-justify-center"},[t.createElementVNode("span",null,"解析:")],-1)),t.createElementVNode("div",N,[t.createVNode(P,{modelValue:t.unref(K),"onUpdate:modelValue":s[3]||(s[3]=e=>t.isRef(K)?K.value=e:null),type:"textarea",rows:2,placeholder:"请输入题目解析"},null,8,["modelValue"])])])):t.createCommentVNode("v-if",!0),t.unref($)?(t.openBlock(),t.createElementBlock("div",B,[s[18]||(s[18]=t.createElementVNode("div",{class:"label flex flex-justify-center"},[t.createElementVNode("span",null,"富文本:")],-1)),t.createElementVNode("div",S,[t.createVNode(o.default,t.mergeProps({"model-value":t.unref(F),"onUpdate:modelValue":s[4]||(s[4]=e=>t.isRef(F)?F.value=e:null)},t.unref(_),{style:{width:"100%"}}),null,16,["model-value"]),t.createElementVNode("div",b,[t.createVNode(ue,{type:"danger",onClick:X},{default:t.withCtx((()=>s[17]||(s[17]=[t.createTextVNode(" 删除富文本 ")]))),_:1})])])])):t.createCommentVNode("v-if",!0)])),key:"0"}:void 0]),1032,["show-edit"]),t.createVNode(ce,{modelValue:t.unref(O),"onUpdate:modelValue":s[11]||(s[11]=e=>t.isRef(O)?O.value=e:null),title:"添加结果",class:"customize-dialog"},{footer:t.withCtx((()=>[t.createVNode(de,{class:"customize-button",type:"primary",plain:"",onClick:ee},{default:t.withCtx((()=>s[19]||(s[19]=[t.createTextVNode(" 取消 ")]))),_:1}),t.createVNode(de,{class:"customize-button",type:"primary",plain:"",onClick:Z},{default:t.withCtx((()=>s[20]||(s[20]=[t.createTextVNode(" 保存 ")]))),_:1})])),default:t.withCtx((()=>[(t.openBlock(),t.createBlock(o.default,t.mergeProps({key:t.unref(j),"model-value":t.unref(G),"onUpdate:modelValue":s[10]||(s[10]=e=>t.isRef(G)?G.value=e:null)},t.unref(_),{style:{width:"100%"}}),null,16,["model-value"]))])),_:1},8,["modelValue"])],2)}}});exports.default=T;
2
2
  //# sourceMappingURL=subject-single.vue.cjs.map