@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.
- package/es/package.json.mjs +1 -1
- package/es/src/data-chart/src/components/bar.vue.mjs +1 -1
- package/es/src/data-chart/src/components/bar.vue.mjs.map +1 -1
- package/es/src/data-chart/src/components/line.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/line.vue2.mjs.map +1 -1
- package/es/src/data-chart/src/components/pie.vue.mjs +1 -1
- package/es/src/data-chart/src/components/pie.vue.mjs.map +1 -1
- package/es/src/file-upload/src/file-upload.vue.mjs.map +1 -1
- package/es/src/photo-crop-tool/src/photo-crop-tool.vue.mjs +1 -1
- package/es/src/photo-crop-tool/src/photo-crop-tool.vue.mjs.map +1 -1
- package/es/src/subject-list/index.mjs.map +1 -1
- package/es/src/subject-list/src/components/subject-single.vue.mjs +1 -1
- package/es/src/subject-list/src/components/subject-single.vue.mjs.map +1 -1
- package/lib/package.json.cjs +1 -1
- package/lib/src/data-chart/src/components/bar.vue.cjs +1 -1
- package/lib/src/data-chart/src/components/bar.vue.cjs.map +1 -1
- package/lib/src/data-chart/src/components/line.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/line.vue2.cjs.map +1 -1
- package/lib/src/data-chart/src/components/pie.vue.cjs +1 -1
- package/lib/src/data-chart/src/components/pie.vue.cjs.map +1 -1
- package/lib/src/file-upload/src/file-upload.vue.cjs.map +1 -1
- package/lib/src/photo-crop-tool/src/photo-crop-tool.vue.cjs +1 -1
- package/lib/src/photo-crop-tool/src/photo-crop-tool.vue.cjs.map +1 -1
- package/lib/src/subject-list/index.cjs.map +1 -1
- package/lib/src/subject-list/src/components/subject-single.vue.cjs +1 -1
- package/lib/src/subject-list/src/components/subject-single.vue.cjs.map +1 -1
- package/package.json +1 -1
- package/theme-chalk/base.css +1 -1
- package/theme-chalk/index.css +1 -1
- package/types/src/data-chart/index.d.ts +17 -1
- package/types/src/data-chart/index.d.ts.map +1 -1
- package/types/src/data-chart/src/components/area.vue.d.ts +8 -0
- package/types/src/data-chart/src/components/area.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/bar.vue.d.ts +9 -0
- package/types/src/data-chart/src/components/bar.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/card.vue.d.ts +27 -0
- package/types/src/data-chart/src/components/card.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/empty.vue.d.ts +11 -0
- package/types/src/data-chart/src/components/empty.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/funnel.vue.d.ts +8 -0
- package/types/src/data-chart/src/components/funnel.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/line.vue.d.ts +9 -0
- package/types/src/data-chart/src/components/line.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/pie.vue.d.ts +9 -0
- package/types/src/data-chart/src/components/pie.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/radar.vue.d.ts +8 -0
- package/types/src/data-chart/src/components/radar.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/scatter-simple.vue.d.ts +8 -0
- package/types/src/data-chart/src/components/scatter-simple.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/scatter.vue.d.ts +8 -0
- package/types/src/data-chart/src/components/scatter.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/components/table.vue.d.ts +27 -0
- package/types/src/data-chart/src/components/table.vue.d.ts.map +1 -0
- package/types/src/data-chart/src/data-chart.vue.d.ts +16 -0
- package/types/src/data-chart/src/data-chart.vue.d.ts.map +1 -0
- package/types/src/file-upload/index.d.ts +27 -1
- package/types/src/file-upload/index.d.ts.map +1 -1
- package/types/src/file-upload/src/file-upload.vue.d.ts +20 -0
- package/types/src/file-upload/src/file-upload.vue.d.ts.map +1 -0
- package/types/src/fixed-action-bar/index.d.ts +53 -1
- package/types/src/fixed-action-bar/index.d.ts.map +1 -1
- package/types/src/fixed-action-bar/src/fixed-action-bar.vue.d.ts +31 -0
- package/types/src/fixed-action-bar/src/fixed-action-bar.vue.d.ts.map +1 -0
- package/types/src/image-upload/index.d.ts +44 -1
- package/types/src/image-upload/index.d.ts.map +1 -1
- package/types/src/image-upload/src/image-upload.vue.d.ts +34 -0
- package/types/src/image-upload/src/image-upload.vue.d.ts.map +1 -0
- package/types/src/photo-crop-tool/index.d.ts +52 -1
- package/types/src/photo-crop-tool/index.d.ts.map +1 -1
- package/types/src/photo-crop-tool/src/photo-crop-tool.vue.d.ts +65 -0
- package/types/src/photo-crop-tool/src/photo-crop-tool.vue.d.ts.map +1 -0
- package/types/src/subject-action/index.d.ts +85 -1
- package/types/src/subject-action/index.d.ts.map +1 -1
- package/types/src/subject-action/src/subject-action.vue.d.ts +87 -0
- package/types/src/subject-action/src/subject-action.vue.d.ts.map +1 -0
- package/types/src/subject-layout/index.d.ts +25 -1
- package/types/src/subject-layout/index.d.ts.map +1 -1
- package/types/src/subject-layout/src/subject-layout.vue.d.ts +42 -0
- package/types/src/subject-layout/src/subject-layout.vue.d.ts.map +1 -0
- package/types/src/subject-list/index.d.ts +18 -2
- package/types/src/subject-list/index.d.ts.map +1 -1
- package/types/src/subject-list/src/components/SubjectPageEnd.vue.d.ts +24 -0
- package/types/src/subject-list/src/components/SubjectPageEnd.vue.d.ts.map +1 -0
- package/types/src/subject-list/src/components/SubjectRichText.vue.d.ts +25 -0
- package/types/src/subject-list/src/components/SubjectRichText.vue.d.ts.map +1 -0
- package/types/src/subject-list/src/components/subject-blank-fill.vue.d.ts +32 -0
- package/types/src/subject-list/src/components/subject-blank-fill.vue.d.ts.map +1 -0
- package/types/src/subject-list/src/components/subject-scale.vue.d.ts +29 -0
- package/types/src/subject-list/src/components/subject-scale.vue.d.ts.map +1 -0
- package/types/src/subject-list/src/components/subject-single.vue.d.ts +37 -0
- package/types/src/subject-list/src/components/subject-single.vue.d.ts.map +1 -0
- package/types/src/subject-list/src/components/subject-text-fill.vue.d.ts +34 -0
- package/types/src/subject-list/src/components/subject-text-fill.vue.d.ts.map +1 -0
- package/types/src/subject-list/src/subject-list.vue.d.ts +21 -0
- package/types/src/subject-list/src/subject-list.vue.d.ts.map +1 -0
- package/types/src/subject-type/index.d.ts +5 -1
- package/types/src/subject-type/index.d.ts.map +1 -1
- package/types/src/subject-type/src/subject-type.vue.d.ts +7 -0
- package/types/src/subject-type/src/subject-type.vue.d.ts.map +1 -0
- package/types/src/tiny-mce-editor/index.d.ts +17 -1
- package/types/src/tiny-mce-editor/index.d.ts.map +1 -1
- package/types/src/tiny-mce-editor/src/tiny-mce-editor.vue.d.ts +32 -0
- package/types/src/tiny-mce-editor/src/tiny-mce-editor.vue.d.ts.map +1 -0
package/es/package.json.mjs
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
var r="0.0.
|
1
|
+
var r="0.0.33";export{r as version};
|
2
2
|
//# sourceMappingURL=package.json.mjs.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{defineComponent as e,inject as a,ref as t,computed as s,createElementBlock as r,openBlock as o}from"vue";import{uniq as c}from"lodash-es";import{InjectionChartMerge as l}from"../utils/injectionKeys.mjs";import{useCharts as i}from"../utils/useCharts.mjs";var
|
1
|
+
import{defineComponent as e,inject as a,ref as t,computed as s,createElementBlock as r,openBlock as o}from"vue";import{uniq as c}from"lodash-es";import{InjectionChartMerge as l}from"../utils/injectionKeys.mjs";import{useCharts as i}from"../utils/useCharts.mjs";var u=e({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(e){const u=a(l,(e=>e),!0),p=t(null),n=s((()=>{const{colDesc:a,xGroupByDesc:t,groupByDesc:s,data:r=[],modelName:o}=e.chartData,l=Array.from(new Set(r.map((e=>e[t.colDesc||""])))).filter((e=>null!=e))||[],i=s.find((e=>!e.xAxis))||{groupByValues:[],colDesc:""};i.groupByValues=c(r.map((e=>i.colDesc?String(e[i.colDesc]):""))),t&&t.groupByValues&&(t.groupByValues=c(r.map((e=>t.colDesc?String(e[t.colDesc]):""))));const p={title:{text:o},xAxis:{name:"",type:"category",axisLabel:{interval:0,formatter:e=>e.length>5?`${e.substring(0,5)}...`:e},data:l},yAxis:{type:"value"},legend:{data:[]},dataZoom:[{type:"inside",disabled:l.length<15}]};if(1===s.length)p.series=a.map((e=>({name:e,data:r.map((a=>a[e])),type:"bar",emphasis:{focus:"series"},label:{show:!0,position:"inside"}}))),p.legend.data=a;else if(2===s.length){const e=a.map((e=>i.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 o=null;return r.forEach((r=>{i.colDesc&&r[i.colDesc]===a&&t.colDesc&&r[t.colDesc]===e&&s.stack&&(o=r[s.stack]??null)})),o||""})).filter((e=>""!==e)),s}))||[])).flat();p.series=e,delete p.legend}function n(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(e.subShowType){case"bar-simple":case"default":n(p.xAxis,"category",l,t.colDesc||""),n(p.yAxis,"value");break;case"bar-y-category":n(p.xAxis,"value"),n(p.yAxis,"category",l,t.colDesc||"")}return u(p,e.chartOptions)}));return i({chartDOM:p,chartOptions:n,chartData:s((()=>e.chartData))}),(e,a)=>(o(),r("div",{ref_key:"dataChartBar",ref:p,class:"data-chart-bar"},null,512))}});export{u as default};
|
2
2
|
//# sourceMappingURL=bar.vue.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"bar.vue.mjs","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","
|
1
|
+
{"version":3,"file":"bar.vue.mjs","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
|
-
import{defineComponent as e,ref as a,inject as t,computed as s,createElementBlock as r,openBlock as
|
1
|
+
import{defineComponent as e,ref as a,inject as t,computed as s,createElementBlock as r,openBlock as l}from"vue";import{InjectionChartMerge as n}from"../utils/injectionKeys.mjs";import{useCharts as c}from"../utils/useCharts.mjs";var i=e({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(e){const i=a(),o=t(n,(e=>e),!0),p=15,u="Total";const d=s((()=>{const{colDesc:a,xGroupByDesc:t,groupByDesc:s,data:r,modelName:l}=e.chartData,n=Array.from(new Set(r?.map((e=>e[t?.colDesc||""])))).filter((e=>null!=e))||[],c=s?.find((e=>!e.xAxis)),i={title:{text:l},legend:{data:[]},xAxis:{name:t?.colDesc||"",data:n},dataZoom:[{type:"inside",disabled:n.length<p}]};if(1===s?.length)i.series=a.map((e=>({name:e,type:"line",data:r.map((a=>a[e])).filter((e=>null!=e))}))),i.legend.data=a;else if(2===s?.length){const e=[...new Set(r.map((e=>String(e[c?.colDesc||""]))))];i.legend.data=e,i.series=e.map((e=>function(e,a,t,s,r,l){const n=[];return a.forEach((a=>{const c=t.find((t=>t[s?.colDesc]===a&&t[r?.colDesc]===e));c?n.push(c[l[0]]):n.push(0)})),{name:e,type:"line",stack:u,areaStyle:{},data:n}}(e,n,r,t,c,a)))}return i.series=i.series?.map((a=>{const t={...a};switch(e.subShowType){case"line-simple":default:delete t.areaStyle;break;case"area-basic":t.areaStyle={}}return t})),o(i,e.chartOptions)}));return c({chartDOM:i,chartOptions:d,chartData:s((()=>e.chartData))}),(e,a)=>(l(),r("div",{ref_key:"dataChartLine",ref:i,class:"data-chart-line"},null,512))}});export{i as default};
|
2
2
|
//# sourceMappingURL=line.vue2.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"line.vue2.mjs","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":"wiBA6BA,MAAMA,EAAgBC,IAChBC,EAAQC,EAAOC,GAAsBC,GAAWA,IAAG,GAYnDC,EACa,GADbA,EAEQ,QAoCR,MAAAC,EAAmBC,GAAwB,KAC/C,MAAMC,QAAEA,EAASC,aAAAA,EAAAC,YAAcA,OAAaC,EAAMC,UAAAA,GAAcC,EAAAC,UAC1DC,EAAYC,MAAMC,KAAK,IAAIC,IAAIP,GAAMQ,
|
1
|
+
{"version":3,"file":"line.vue2.mjs","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":"wiBA6BA,MAAMA,EAAgBC,IAChBC,EAAQC,EAAOC,GAAsBC,GAAWA,IAAG,GAYnDC,EACa,GADbA,EAEQ,QAoCR,MAAAC,EAAmBC,GAAwB,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,EAAA,CAAEC,SAAUrD,EAAemD,aAAc5C,EAAkBQ,UAAWP,GAAS,IAAMM,EAAAC"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{defineComponent as e,inject as t,ref as r,computed as a,createElementBlock as o,openBlock as s}from"vue";import{orderBy as c,cloneDeep as i}from"lodash-es";import{InjectionChartMerge as l}from"../utils/injectionKeys.mjs";import{useCharts as n}from"../utils/useCharts.mjs";var u=e({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(e){const u=t(l,(e=>e),!0),p=r(null),m=a((()=>{const{colDesc:t,xGroupByDesc:r,data:a,modelName:o}=e.chartData,s=t.length,l={title:{text:o},series:t.map(((t,o)=>{const l={name:t,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 n=5;const u=c(i(a),[t],["desc"]),p=u.reduce(((e,r)=>e+Number(r[t])),0);if(a.length>n)for(;n<9;){const e=u.slice(0,n);if(e.reduce(((e,r)=>e+Number(r[t])),0)/p>.9||8===n){const o=u.slice(n,u.length-1);l.data=a.map((a=>{let o={};return e.forEach((e=>{JSON.stringify(e)===JSON.stringify(a)&&(o={name:r?.colDesc?a[r.colDesc]:"",value:a[t]})})),o})).filter((e=>e)),l.data.push({name:"其它",value:o.reduce(((e,r)=>e+Number(r[t])),0)});break}n++}else l.data=a.map((e=>({name:r?.colDesc
|
1
|
+
import{defineComponent as e,inject as t,ref as r,computed as a,createElementBlock as o,openBlock as s}from"vue";import{orderBy as c,cloneDeep as i}from"lodash-es";import{InjectionChartMerge as l}from"../utils/injectionKeys.mjs";import{useCharts as n}from"../utils/useCharts.mjs";var u=e({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(e){const u=t(l,(e=>e),!0),p=r(null),m=a((()=>{const{colDesc:t,xGroupByDesc:r,data:a,modelName:o}=e.chartData,s=t.length,l={title:{text:o},series:t.map(((t,o)=>{const l={name:t,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 n=5;const u=c(i(a),[t],["desc"]),p=u.reduce(((e,r)=>e+Number(r[t])),0);if(a.length>n)for(;n<9;){const e=u.slice(0,n);if(e.reduce(((e,r)=>e+Number(r[t])),0)/p>.9||8===n){const o=u.slice(n,u.length-1);l.data=a.map((a=>{let o={};return e.forEach((e=>{JSON.stringify(e)===JSON.stringify(a)&&(o={name:r?.colDesc?a[r.colDesc]:"",value:a[t]})})),o})).filter((e=>e)),l.data.push({name:"其它",value:o.reduce(((e,r)=>e+Number(r[t])),0)});break}n++}else l.data=a.map((e=>({name:r?.colDesc&&e[r.colDesc]||"",value:Number(e[t]||0)})));if(1===s?l.center=["50%","60%"]:2===s?0===o?(l.right="40%",l.left="",l.center=["40%","60%"]):(l.right="",l.left="40%",l.center=["60%","60%"]):3===s?0===o?(l.right="40%",l.bottom="50%",l.top="",l.left="",l.center=["40%","78%"]):1===o?(l.right="",l.bottom="50%",l.top="",l.left="40%",l.center=["60%","78%"]):(l.right="40%",l.bottom="",l.top="50%",l.left="",l.center=["40%","60%"]):4===s&&(0===o?(l.right="40%",l.bottom="50%",l.top="",l.left="",l.center=["40%","78%"]):1===o?(l.right="",l.bottom="50%",l.top="",l.left="40%",l.center=["60%","78%"]):2===o?(l.right="40%",l.bottom="",l.top="50%",l.left="",l.center=["40%","60%"]):(l.right="",l.bottom="",l.top="50%",l.left="40%",l.center=["60%","60%"])),"pie-borderRadius"===e.subShowType)l.radius=["50%","70%"];else l.radius="50%";return l}))};return u(l,e.chartOptions)}));return n({chartDOM:p,chartOptions:m,chartData:a((()=>e.chartData))}),(e,t)=>(s(),o("div",{ref_key:"dataChartPie",ref:p,class:"data-chart-pie"},null,512))}});export{u as default};
|
2
2
|
//# sourceMappingURL=pie.vue.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"pie.vue.mjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/pie.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PieSeriesOption } from
|
1
|
+
{"version":3,"file":"pie.vue.mjs","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.mjs","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(\",\")
|
1
|
+
{"version":3,"file":"file-upload.vue.mjs","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":"0+BA6BA,MAAMA,EAAOC,EAEPC,EAAKC,EAAa,eAElBC,EAAOC,GAAS,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,EAAUC,MAAM,WAAWhB,EAAKW,MAAMM,KAAK,cAExCJ,GACHE,EAAUC,MAAM,cAAcd,EAAIY,WAE7BJ,GAAYG,CAAA,EAGfK,EAAoC,KACxCH,EAAUI,QAAQ,WAAU,EAGxBC,EAAsC,CAACC,EAAKf,EAAMgB,KACjD1B,EAAA,YAAayB,EAAKf,EAAMgB,EAAQ"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{defineComponent as e,ref as t,computed as l,watch as a,onMounted as o,nextTick as i,onUnmounted as u,createElementBlock as v,openBlock as h,normalizeClass as s,unref as n,toDisplayString as r,Fragment as p,createElementVNode as c,normalizeStyle as f}from"vue";import{useNamespace as d}from"@qxs-bns/hooks";import{
|
1
|
+
import{defineComponent as e,ref as t,computed as l,watch as a,onMounted as o,nextTick as i,onUnmounted as u,createElementBlock as v,openBlock as h,normalizeClass as s,unref as n,toDisplayString as r,Fragment as p,createElementVNode as c,normalizeStyle as f}from"vue";import{useNamespace as d}from"@qxs-bns/hooks";import{useCanvas as m}from"./composables.mjs";import{useElementSize as g,useDraggable as y}from"@vueuse/core";const w=["src"];var x=e({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(e,{expose:x}){const b=e;let R=0,H=0,T=0,z=0;const F=d("photo-crop-tool"),N=t(null),W=t(null),k=t(null),L=t(""),M=t(""),E=t({x:0,y:0}),$=t({width:b.defaultWidth,height:b.defaultHeight,x:0,y:0}),{width:C,height:_}=g(N),{width:j}=g(k),{x:U,y:B,style:O}=y(N,{containerElement:W,draggingElement:N,disabled:l((()=>!!M.value)),exact:!0,initialValue:E}),S=l((()=>b.imgFile?URL.createObjectURL(b.imgFile):""));a((()=>b.imgFile),(e=>{e&&!e.type.startsWith("image/")?L.value="文件类型错误":L.value=""}));const P=l((()=>(k.value?.naturalWidth||0)/j.value)),V=l((()=>{const e={left:0,top:0};return"bottom-right"===M.value?(e.left=$.value.x,e.top=$.value.y):"top-left"===M.value?(e.left=$.value.x-C.value,e.top=$.value.y-_.value):"top-right"===M.value?(e.top=$.value.y-_.value,e.left=$.value.x):"bottom-left"===M.value&&(e.left=$.value.x-C.value,e.top=$.value.y),e})),X=l((()=>{const{aspectRatio:e}=b,t={width:`${$.value.width||b.defaultWidth}`,height:`${$.value.height||b.defaultHeight}`,"aspect-ratio":e,top:`${V.value.top}px`,left:`${V.value.left}px`};return"free"===b.zoomType?delete t["aspect-ratio"]:"fixed"===b.zoomType&&delete t.height,F.cssVarBlock(t)}));function Y(e){return e*P.value}function q(e,t){const l=W.value?.clientWidth||1/0,a=W.value?.clientHeight||1/0;return{width:Math.min(Math.max(e,0),l),height:Math.min(Math.max(t,0),a)}}function D(e){const t=e.clientX-R,l=e.clientY-H;if("bottom-right"===M.value){if("free"===b.zoomType){const{width:e,height:a}=q(T+t,z+l);$.value.width=e,$.value.height=a}else if("fixed"===b.zoomType){const e=Number.parseFloat(b.aspectRatio.split(" / ")[0])/Number.parseFloat(b.aspectRatio.split(" / ")[1]);let l=T+t,a=l/e;const{width:o,height:i}=q(l,a);i>(W.value?.clientHeight||1/0)&&(a=W.value?.clientHeight||1/0,l=a*e),$.value.width=o,$.value.height=i}}else if("top-left"===M.value){if("free"===b.zoomType){const{width:e,height:a}=q(T-t,z-l);$.value.width=e,$.value.height=a}else if("fixed"===b.zoomType){const e=Number.parseFloat(b.aspectRatio.split(" / ")[0])/Number.parseFloat(b.aspectRatio.split(" / ")[1]);let l=T-t,a=l/e;const{width:o,height:i}=q(l,a);i>(W.value?.clientHeight||1/0)&&(a=W.value?.clientHeight||1/0,l=a*e),$.value.width=o,$.value.height=i}U.value=V.value.left,B.value=V.value.top}else if("top-right"===M.value){if("free"===b.zoomType){const{width:e,height:a}=q(T+t,z-l);$.value.width=e,$.value.height=a}else if("fixed"===b.zoomType){const e=Number.parseFloat(b.aspectRatio.split(" / ")[0])/Number.parseFloat(b.aspectRatio.split(" / ")[1]);let l=T+t,a=l/e;const{width:o,height:i}=q(l,a);i>(W.value?.clientHeight||1/0)&&(a=W.value?.clientHeight||1/0,l=a*e),$.value.width=o,$.value.height=i}U.value=V.value.left,B.value=V.value.top}else if("bottom-left"===M.value){if("free"===b.zoomType){const{width:e,height:a}=q(T-t,z+l);$.value.width=e,$.value.height=a}else if("fixed"===b.zoomType){const e=Number.parseFloat(b.aspectRatio.split(" / ")[0])/Number.parseFloat(b.aspectRatio.split(" / ")[1]);let l=T-t,a=l/e;const{width:o,height:i}=q(l,a);i>(W.value?.clientHeight||1/0)&&(a=W.value?.clientHeight||1/0,l=a*e),$.value.width=o,$.value.height=i}U.value=V.value.left,B.value=V.value.top}e.preventDefault(),e.stopPropagation()}function I(e,t){M.value=t,R=e.clientX,H=e.clientY,T=$.value.width,z=$.value.height,"bottom-right"===t?($.value.x=U.value,$.value.y=B.value):"top-left"===t?($.value.x=U.value+C.value,$.value.y=B.value+_.value):"top-right"===t?($.value.x=U.value,$.value.y=B.value+_.value):"bottom-left"===t&&($.value.x=U.value+C.value,$.value.y=B.value)}function Q(){M.value=""}return document.addEventListener("mouseup",Q),document.addEventListener("mousemove",D),o((()=>{i((()=>{E.value.x=(W.value?.offsetWidth||0)/2-$.value.width/2,E.value.y=(W.value?.offsetHeight||0)/2-$.value.height/2}))})),u((()=>{S.value&&URL.revokeObjectURL(S.value),document.removeEventListener("mouseup",Q),document.removeEventListener("mousemove",D)})),x({crop:async function(e=k.value){let t="transparent";W.value&&(t=window.getComputedStyle(W.value).backgroundColor);const l=document.createElement("canvas");l.width=Y(W.value?.clientWidth||0),l.height=Y(W.value?.clientHeight||0);const{drawImage:a,cropCanvas:o,drawColor:i}=m(l);return i(0,0,l.width,l.height,t),a(e,Y(e.offsetLeft),Y(e.offsetTop),e.naturalWidth,e.naturalHeight),await o(Y(U.value),Y(B.value),Y(C.value),Y(_.value))},resize:function(){$.value.width=b.defaultWidth,$.value.height=b.defaultHeight,U.value=0,B.value=0}}),(e,t)=>(h(),v("div",{ref_key:"containerBoxRef",ref:W,class:s([n(F).e("img-box")])},[n(L)?(h(),v("div",{key:0,class:s([n(F).e("error-message")])},r(n(L)),3)):(h(),v(p,{key:1},[c("img",{ref_key:"imgRef",ref:k,class:s([n(F).e("image")]),src:n(S)},null,10,w),c("div",{ref_key:"cropBoxRef",ref:N,class:s([n(F).e("crop-tool-box")]),style:f([n(X),n(M)?`left: ${n(V).left}px;top: ${n(V).top}px`:n(O)])},[c("div",{class:s([n(F).e("top-left")]),onMousedown:t[0]||(t[0]=e=>I(e,"top-left"))},null,34),c("div",{class:s([n(F).e("top-right")]),onMousedown:t[1]||(t[1]=e=>I(e,"top-right"))},null,34),c("div",{class:s([n(F).e("bottom-right")]),onMousedown:t[2]||(t[2]=e=>I(e,"bottom-right"))},null,34),c("div",{class:s([n(F).e("bottom-left")]),onMousedown:t[3]||(t[3]=e=>I(e,"bottom-left"))},null,34)],6)],64))],2))}});export{x as default};
|
2
2
|
//# sourceMappingURL=photo-crop-tool.vue.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"photo-crop-tool.vue.mjs","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.mjs","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":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.mjs","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
|
1
|
+
{"version":3,"file":"index.mjs","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"],"mappings":"2FAGA,MAAMA,EAAiBC,EAAYC"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{ElCheckbox as e,ElRadio as l,ElInput as t,ElSelect as a,ElOption as i,ElIcon as s,ElLink as n,ElDialog as r,ElButton as o}from"element-plus/es";import{defineComponent as u,useAttrs as d,ref as m,computed as c,watch as p,onMounted as v,createElementBlock as y,openBlock as f,normalizeClass as x,unref as w,createVNode as h,createSlots as C,withCtx as g,createBlock as b,createCommentVNode as k,createElementVNode as S,createTextVNode as A,toDisplayString as V,Fragment as T,renderList as q,isRef as R,mergeProps as j}from"vue";import{CirclePlus as _,Remove as E}from"@element-plus/icons-vue";import{useNamespace as I}from"@qxs-bns/hooks";import U from"../../../subject-action/src/subject-action.vue.mjs";import B from"../../../subject-layout/src/subject-layout.vue.mjs";import K from"../../../tiny-mce-editor/src/tiny-mce-editor.vue.mjs";import{setGuid as L}from"@qxs-bns/utils";import{ElMessage as $}from"element-plus";const N={class:"preview"},z={class:"title"},M={key:0},D={key:1},H={key:0},O=["innerHTML"],Q={class:"preview-answer"},F={class:"order"},G={class:"order"},J={style:{flex:"1"}},P={class:"margin-bottom flex flex-items-center"},W={class:"margin-bottom answer-list"},X={class:"order"},Y={key:0,class:"margin-bottom flex flex-items-center"},Z={style:{flex:"1"}},ee={key:1,class:"flex"},le={style:{flex:"1"}},te={key:2,class:"margin-bottom flex"},ae={style:{flex:"1"}},ie={class:"flex flex-justify-end"};var se=u({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(u,{emit:se}){const ne=u,re=se,oe=d(),ue=m(0),de=m(!1),me=m(1),ce=m(1),pe=m([{title:"",isCorrect:!1},{title:"",isCorrect:!1},{title:"",isCorrect:!1},{title:"",isCorrect:!1}]),ve=m(),ye=m(""),fe=m(""),xe=m(!1),we=m(""),he=m(0),Ce=m(!1),ge=m(""),be=c((()=>"single"===ne.type?"单选题":"multiple"===ne.type?"多选题":"排序题")),ke=m([]),Se=c((()=>{const e=[];for(let l=pe.value.length;l>1;l--)e.push({label:`至少选择${l}项`,value:l});return e.reverse()}));function Ae(){ne.isSave||pe.value.push({title:"",isCorrect:!1,customAnswerId:L()})}function Ve(){xe.value=!1,we.value=""}function Te(){if(!ye.value)return void $.error("题目标题不能为空!");let e="",l=!1,t=0;if("multiple"===ne.type||"single"===ne.type?pe.value.forEach(((a,i)=>{a.title||(e+=`选项${String.fromCharCode(65+i)}未填写。`),a.isCorrect&&(l=!0,t++)})):"sort"===ne.type&&ke.value.length&&(l=!0),e)return void $.error(e);if(new Set(pe.value.map((e=>e.title))).size===pe.value.length){if("multiple"===ne.type){if(1===t)return void $.error("请至少设置两个支持选项");if(l&&t<ve.value)return void $.error("至少选几项与支持选项数不符")}console.log(me.value,111),2!==me.value&&3!==me.value||l?re("save",{title:ye.value,answers:pe.value.map(((e,l)=>({...e,orderIndex:l+1}))),examExpand:ke.value.map((e=>e.charCodeAt(0)-65+1)).join(","),analysis:fe.value,isSetCorrectAnswer:l,leastAnswerCount:ve.value,examRichTextContent:xe.value?we.value:"",examAnswerRelationType:ce.value,isKey:de.value,answerCheckType:me.value}):$.error("请设置支持选项")}else $.error("选项不能重复")}function qe(){pe.value[ue.value].resultItem=ge.value||"",Ce.value=!1}function Re(){Ce.value=!1,ge.value=""}function je(e){de.value=e}function _e(e){me.value=e}function Ee(e,l){re("add",e,l?ne.examAnswerRelationType:null)}p((()=>ne.isEdit),(()=>{ne.isEdit&&(he.value=(new Date).getTime())}));const Ie=c((()=>e=>{let l=0;return e.forEach((e=>{e.relationAnswers&&(l+=e.relationAnswers.length)})),l})),Ue=I("subject-single");return v((function(){if(ne.title&&(ye.value=ne.title),ne.answerCheckType&&(me.value=ne.answerCheckType),ne.isKey&&(de.value=ne.isKey),ne.examAnswerRelationType&&(ce.value=ne.examAnswerRelationType),ne.answerList&&ne.answerList.length&&(pe.value=ne.answerList),ne.leastAnswerCount&&(ve.value=ne.leastAnswerCount),ne.examExpand&&ne.examExpand){const e=ne.examExpand.split(",");ke.value=e.map((e=>{const l=ne.answerList.find((l=>l.answerId?.toString()===e));return l?String.fromCharCode(65+l.orderIndex-1):e})).filter(Boolean)}ne.analysis&&(fe.value=ne.analysis),ne.examRichTextContent&&(we.value=ne.examRichTextContent,xe.value=!0)})),(u,d)=>{const m=e,c=l,p=t,v=i,I=a,$=s,se=n,he=o,Be=r;return f(),y("div",{class:x(w(Ue).e("single-exam"))},[h(B,{"show-edit":u.isEdit},C({preview:g((()=>[S("div",N,[S("div",null,[S("span",z,[A(V(u.orderIndex+1)+"."+V(w(ye))+" ",1),"single"===u.type?(f(),y("span",M,"(单选题)")):["multiple","sort"].includes(u.type)?(f(),y("span",D," ("+V(w(be))+V(w(ve)?`至少选${w(ve)}项${"sort"===u.type?"并排序":""}`:"")+") ",1)):k("v-if",!0)])]),w(xe)?(f(),y("div",H,[S("div",{innerHTML:w(we)},null,8,O)])):k("v-if",!0),S("div",Q,["sort"===u.type?(f(!0),y(T,{key:0},q(w(pe),((e,l)=>(f(),b(m,{key:l,class:"radio",disabled:!0},{default:g((()=>[S("span",F,V(String.fromCharCode(65+l))+". ",1),A(" "+V(e.title),1)])),_:2},1024)))),128)):(f(!0),y(T,{key:1},q(w(pe),((e,l)=>(f(),b(c,{key:l,class:"radio",value:"disabled",disabled:""},{default:g((()=>[S("span",G,V(String.fromCharCode(65+l))+". ",1),A(" "+V(e.title)+" "+V(e.isCorrect?"(支持选项)":"")+" "+V(1===w(ce)?e.resultItem?"(已设置结果项)":"(未设置结果项)":"")+" "+V(2===w(ce)?e.answerRelations?.length?"(已设置关联)":"(未设置关联)":""),1)])),_:2},1024)))),128))])])])),default:g((()=>[u.showAction?(f(),b(U,{key:0,"is-edit":u.isEdit,"is-set":u.isSet,isKey:w(de),examAnswerRelationType:ne.examAnswerRelationType,answerCheckType:w(me),onMoveUp:d[5]||(d[5]=e=>re("move","up")),onMoveDown:d[6]||(d[6]=e=>re("move","down")),onDelete:d[7]||(d[7]=e=>re("delete")),onSave:Te,onEdit:d[8]||(d[8]=e=>re("edit")),onAdd:Ee,onOnShowRichText:d[9]||(d[9]=e=>xe.value=!0),onSetKey:je,onSetAnswerSetting:_e},null,8,["is-edit","is-set","isKey","examAnswerRelationType","answerCheckType"])):k("v-if",!0)])),_:2},[u.isEdit?{name:"edit",fn:g((()=>[S("div",{class:x(["flex",[{"margin-bottom":w(xe)}]])},[d[12]||(d[12]=S("div",{class:"label flex flex-justify-center"},[S("span",null,"题目:")],-1)),S("div",J,[h(p,{modelValue:w(ye),"onUpdate:modelValue":d[0]||(d[0]=e=>R(ye)?ye.value=e:null),type:"textarea",rows:2,placeholder:`【${w(be)}】请输入问题`,disabled:u.isSave,"show-word-limit":"",maxlength:"200",class:"margin-bottom"},null,8,["modelValue","placeholder","disabled"])])],2),S("div",P,[d[13]||(d[13]=S("div",{class:"label flex flex-justify-center"},[S("span",null,"设置:")],-1)),["multiple","sort"].includes(u.type)?(f(),b(I,{key:0,modelValue:w(ve),"onUpdate:modelValue":d[1]||(d[1]=e=>R(ve)?ve.value=e:null),style:{width:"150px"},placeholder:"至少选择几项",disabled:u.isSave},{default:g((()=>[(f(!0),y(T,null,q(w(Se),(e=>(f(),b(v,{key:e.value,value:e.value,label:e.label},null,8,["value","label"])))),128))])),_:1},8,["modelValue","disabled"])):k("v-if",!0)]),S("div",W,[(f(!0),y(T,null,q(w(pe),((e,l)=>(f(),y("div",{key:l,class:"answer-item flex flex-items-center"},[S("span",X,V(String.fromCharCode(65+l))+".",1),h(p,{modelValue:e.title,"onUpdate:modelValue":l=>e.title=l,class:"input","show-word-limit":"",maxlength:"100",placeholder:`选项${String.fromCharCode(65+l)}`,disabled:u.isSave},null,8,["modelValue","onUpdate:modelValue","placeholder","disabled"]),["single","multiple"].includes(u.type)?(f(),b(m,{key:0,modelValue:e.isCorrect,"onUpdate:modelValue":l=>e.isCorrect=l,class:x([{"is-correct":e.isCorrect}]),disabled:u.isSave,style:{"margin-left":"10px"},onChange:l=>function(e,l){"single"===ne.type?(l&&pe.value.forEach((l=>{l!==e&&(l.isCorrect=!1)})),e.isCorrect=l):"multiple"===ne.type&&(e.isCorrect=l)}(e,l)},{default:g((()=>[...d[14]||(d[14]=[A(" 支持选项 ")])])),_:2},1032,["modelValue","onUpdate:modelValue","class","disabled","onChange"])):k("v-if",!0),h($,{class:"icon"},{default:g((()=>[h(w(_),{class:x([{disabled:u.isSave}]),onClick:Ae},null,8,["class"])])),_:1}),h($,{class:"icon"},{default:g((()=>[h(w(E),{class:x([{disabled:w(pe).length<3||u.isSave}]),onClick:e=>function(e){pe.value.length<3||ne.isSave||pe.value.splice(e,1)}(l)},null,8,["class","onClick"])])),_:2},1024),1===w(ce)?(f(),b(se,{key:1,type:"primary",class:"margin-left-10",onClick:e=>{return t=l,ue.value=t,ge.value=pe.value[t].resultItem||"",void(Ce.value=!0);var t}},{default:g((()=>[S("span",null,V(e.resultItem?"编辑结果":"添加结果"),1)])),_:2},1032,["onClick"])):k("v-if",!0),2===w(ce)?(f(),b(se,{key:2,type:"primary",class:"margin-left-10",onClick:l=>function(e){e.customAnswerId=e.examAnswerId||L(),re("setRelation",ne.customId,e)}(e)},{default:g((()=>[S("span",null,V(e.answerRelations?.length?`关联了${w(Ie)(e.answerRelations)}项`:"关联检查"),1)])),_:2},1032,["onClick"])):k("v-if",!0)])))),128))]),"sort"===u.type?(f(),y("div",Y,[d[15]||(d[15]=S("div",{class:"label flex flex-justify-end"},[S("span",null,"排序答案:")],-1)),S("div",Z,[h(I,{modelValue:w(ke),"onUpdate:modelValue":d[2]||(d[2]=e=>R(ke)?ke.value=e:null),mode:"multiple",style:{width:"360px"},placeholder:"请按顺序选择排序答案","show-arrow":!0},{default:g((()=>[k(' :options="[...Array(answers.length)].map((_, i) => ({ value: String.fromCharCode(65 + i) }))" '),(f(!0),y(T,null,q(w(pe),((e,l)=>(f(),b(v,{key:l,label:e.title,value:String.fromCharCode(65+l)},null,8,["label","value"])))),128))])),_:1},8,["modelValue"])])])):k("v-if",!0),u.showAnalysis?(f(),y("div",ee,[d[16]||(d[16]=S("div",{class:"label flex flex-justify-center"},[S("span",null,"解析:")],-1)),S("div",le,[h(p,{modelValue:w(fe),"onUpdate:modelValue":d[3]||(d[3]=e=>R(fe)?fe.value=e:null),type:"textarea",rows:2,placeholder:"请输入题目解析"},null,8,["modelValue"])])])):k("v-if",!0),w(xe)?(f(),y("div",te,[d[18]||(d[18]=S("div",{class:"label flex flex-justify-center"},[S("span",null,"富文本:")],-1)),S("div",ae,[h(K,j({"model-value":w(we),"onUpdate:modelValue":d[4]||(d[4]=e=>R(we)?we.value=e:null)},w(oe),{style:{width:"100%"}}),null,16,["model-value"]),S("div",ie,[h(se,{type:"danger",onClick:Ve},{default:g((()=>d[17]||(d[17]=[A(" 删除富文本 ")]))),_:1})])])])):k("v-if",!0)])),key:"0"}:void 0]),1032,["show-edit"]),h(Be,{modelValue:w(Ce),"onUpdate:modelValue":d[11]||(d[11]=e=>R(Ce)?Ce.value=e:null),title:"添加结果",class:"customize-dialog"},{footer:g((()=>[h(he,{class:"customize-button",type:"primary",plain:"",onClick:Re},{default:g((()=>d[19]||(d[19]=[A(" 取消 ")]))),_:1}),h(he,{class:"customize-button",type:"primary",plain:"",onClick:qe},{default:g((()=>d[20]||(d[20]=[A(" 保存 ")]))),_:1})])),default:g((()=>[(f(),b(K,j({key:w(ue),"model-value":w(ge),"onUpdate:modelValue":d[10]||(d[10]=e=>R(ge)?ge.value=e:null)},w(oe),{style:{width:"100%"}}),null,16,["model-value"]))])),_:1},8,["modelValue"])],2)}}});export{se as default};
|
1
|
+
import{ElCheckbox as e,ElRadio as l,ElInput as t,ElSelect as a,ElOption as i,ElIcon as s,ElLink as n,ElDialog as r,ElButton as o}from"element-plus/es";import{defineComponent as u,useAttrs as d,ref as m,computed as c,watch as p,onMounted as v,createElementBlock as y,openBlock as f,normalizeClass as x,unref as w,createVNode as h,createSlots as C,withCtx as g,createBlock as b,createCommentVNode as k,createElementVNode as S,createTextVNode as A,toDisplayString as V,Fragment as T,renderList as q,isRef as R,mergeProps as j}from"vue";import{CirclePlus as _,Remove as I}from"@element-plus/icons-vue";import{useNamespace as E}from"@qxs-bns/hooks";import U from"../../../subject-action/src/subject-action.vue.mjs";import B from"../../../subject-layout/src/subject-layout.vue.mjs";import K from"../../../tiny-mce-editor/src/tiny-mce-editor.vue.mjs";import{setGuid as L}from"@qxs-bns/utils";import{ElMessage as $}from"element-plus";const N={class:"preview"},z={class:"title"},M={key:0},D={key:1},H={key:0},O=["innerHTML"],Q={class:"preview-answer"},F={class:"order"},G={class:"order"},J={style:{flex:"1"}},P={class:"margin-bottom flex flex-items-center"},W={class:"margin-bottom answer-list"},X={class:"order"},Y={key:0,class:"margin-bottom flex flex-items-center"},Z={style:{flex:"1"}},ee={key:1,class:"flex"},le={style:{flex:"1"}},te={key:2,class:"margin-bottom flex"},ae={style:{flex:"1"}},ie={class:"flex flex-justify-end"};var se=u({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(u,{emit:se}){const ne=u,re=se,oe=d(),ue=m(0),de=m(!1),me=m(1),ce=m(1),pe=m([{title:"",isCorrect:!1},{title:"",isCorrect:!1},{title:"",isCorrect:!1},{title:"",isCorrect:!1}]),ve=m(),ye=m(""),fe=m(""),xe=m(!1),we=m(""),he=m(0),Ce=m(!1),ge=m(""),be=c((()=>"single"===ne.type?"单选题":"multiple"===ne.type?"多选题":"排序题")),ke=m([]),Se=c((()=>{const e=[];for(let l=pe.value.length;l>1;l--)e.push({label:`至少选择${l}项`,value:l});return e.reverse()}));function Ae(){ne.isSave||pe.value.push({title:"",isCorrect:!1,customAnswerId:L()})}function Ve(){xe.value=!1,we.value=""}function Te(){if(!ye.value)return void $.error("题目标题不能为空!");let e="",l=!1,t=0;if("multiple"===ne.type||"single"===ne.type?pe.value.forEach(((a,i)=>{a.title?.trim()||(e+=`选项${String.fromCharCode(65+i)}未填写。`),a.isCorrect&&(l=!0,t++),a.examAnswerRelationType=a.resultItem?1:a.answerRelations?.length?2:null})):"sort"===ne.type&&ke.value.length&&(l=!0),e)return void $.error(e);if(new Set(pe.value.map((e=>e.title))).size===pe.value.length){if("multiple"===ne.type){if(1===t)return void $.error("请至少设置两个支持选项");if(l&&t<ve.value)return void $.error("至少选几项与支持选项数不符")}2!==me.value&&3!==me.value||l?re("save",{title:ye.value,answers:pe.value.map(((e,l)=>({...e,orderIndex:l+1}))),examExpand:ke.value.map((e=>e.charCodeAt(0)-65+1)).join(","),analysis:fe.value,isSetCorrectAnswer:l,leastAnswerCount:ve.value,examRichTextContent:xe.value?we.value:"",examAnswerRelationType:ce.value,isKey:de.value,answerCheckType:me.value}):$.error("请设置支持选项")}else $.error("选项不能重复")}function qe(){pe.value[ue.value].resultItem=ge.value||"",Ce.value=!1}function Re(){Ce.value=!1,ge.value=""}function je(e){de.value=e}function _e(e){me.value=e}function Ie(e,l){re("add",e,l?ne.examAnswerRelationType:null)}p((()=>ne.isEdit),(()=>{ne.isEdit&&(he.value=(new Date).getTime())}));const Ee=c((()=>e=>{let l=0;return e.forEach((e=>{e.relationAnswers&&(l+=e.relationAnswers.length)})),l})),Ue=E("subject-single");return v((function(){if(ne.title&&(ye.value=ne.title),ne.answerCheckType&&(me.value=ne.answerCheckType),ne.isKey&&(de.value=ne.isKey),ne.examAnswerRelationType&&(ce.value=ne.examAnswerRelationType),ne.answerList&&ne.answerList.length&&(pe.value=ne.answerList),ne.leastAnswerCount&&(ve.value=ne.leastAnswerCount),ne.examExpand&&ne.examExpand){const e=ne.examExpand.split(",");ke.value=e.map((e=>{const l=ne.answerList.find((l=>l.answerId?.toString()===e));return l?String.fromCharCode(65+l.orderIndex-1):e})).filter(Boolean)}ne.analysis&&(fe.value=ne.analysis),ne.examRichTextContent&&(we.value=ne.examRichTextContent,xe.value=!0)})),(u,d)=>{const m=e,c=l,p=t,v=i,E=a,$=s,se=n,he=o,Be=r;return f(),y("div",{class:x(w(Ue).e("single-exam"))},[h(B,{"show-edit":u.isEdit},C({preview:g((()=>[S("div",N,[S("div",null,[S("span",z,[A(V(u.orderIndex+1)+"."+V(w(ye))+" ",1),"single"===u.type?(f(),y("span",M,"(单选题)")):["multiple","sort"].includes(u.type)?(f(),y("span",D," ("+V(w(be))+V(w(ve)?`至少选${w(ve)}项${"sort"===u.type?"并排序":""}`:"")+") ",1)):k("v-if",!0)])]),w(xe)?(f(),y("div",H,[S("div",{innerHTML:w(we)},null,8,O)])):k("v-if",!0),S("div",Q,["sort"===u.type?(f(!0),y(T,{key:0},q(w(pe),((e,l)=>(f(),b(m,{key:l,class:"radio",disabled:!0},{default:g((()=>[S("span",F,V(String.fromCharCode(65+l))+". ",1),A(" "+V(e.title),1)])),_:2},1024)))),128)):(f(!0),y(T,{key:1},q(w(pe),((e,l)=>(f(),b(c,{key:l,class:"radio",value:"disabled",disabled:""},{default:g((()=>[S("span",G,V(String.fromCharCode(65+l))+". ",1),A(" "+V(e.title)+" "+V(e.isCorrect?"(支持选项)":"")+" "+V(1===w(ce)?e.resultItem?"(已设置结果项)":"(未设置结果项)":"")+" "+V(2===w(ce)?e.answerRelations?.length?"(已设置关联)":"(未设置关联)":""),1)])),_:2},1024)))),128))])])])),default:g((()=>[u.showAction?(f(),b(U,{key:0,"is-edit":u.isEdit,"is-set":u.isSet,isKey:w(de),examAnswerRelationType:ne.examAnswerRelationType,answerCheckType:w(me),onMoveUp:d[5]||(d[5]=e=>re("move","up")),onMoveDown:d[6]||(d[6]=e=>re("move","down")),onDelete:d[7]||(d[7]=e=>re("delete")),onSave:Te,onEdit:d[8]||(d[8]=e=>re("edit")),onAdd:Ie,onOnShowRichText:d[9]||(d[9]=e=>xe.value=!0),onSetKey:je,onSetAnswerSetting:_e},null,8,["is-edit","is-set","isKey","examAnswerRelationType","answerCheckType"])):k("v-if",!0)])),_:2},[u.isEdit?{name:"edit",fn:g((()=>[S("div",{class:x(["flex",[{"margin-bottom":w(xe)}]])},[d[12]||(d[12]=S("div",{class:"label flex flex-justify-center"},[S("span",null,"题目:")],-1)),S("div",J,[h(p,{modelValue:w(ye),"onUpdate:modelValue":d[0]||(d[0]=e=>R(ye)?ye.value=e:null),type:"textarea",rows:2,placeholder:`【${w(be)}】请输入问题`,disabled:u.isSave,"show-word-limit":"",maxlength:"200",class:"margin-bottom"},null,8,["modelValue","placeholder","disabled"])])],2),S("div",P,[d[13]||(d[13]=S("div",{class:"label flex flex-justify-center"},[S("span",null,"设置:")],-1)),["multiple","sort"].includes(u.type)?(f(),b(E,{key:0,modelValue:w(ve),"onUpdate:modelValue":d[1]||(d[1]=e=>R(ve)?ve.value=e:null),style:{width:"150px"},placeholder:"至少选择几项",disabled:u.isSave},{default:g((()=>[(f(!0),y(T,null,q(w(Se),(e=>(f(),b(v,{key:e.value,value:e.value,label:e.label},null,8,["value","label"])))),128))])),_:1},8,["modelValue","disabled"])):k("v-if",!0)]),S("div",W,[(f(!0),y(T,null,q(w(pe),((e,l)=>(f(),y("div",{key:l,class:"answer-item flex flex-items-center"},[S("span",X,V(String.fromCharCode(65+l))+".",1),h(p,{modelValue:e.title,"onUpdate:modelValue":l=>e.title=l,class:"input","show-word-limit":"",maxlength:"100",placeholder:`选项${String.fromCharCode(65+l)}`,disabled:u.isSave},null,8,["modelValue","onUpdate:modelValue","placeholder","disabled"]),["single","multiple"].includes(u.type)?(f(),b(m,{key:0,modelValue:e.isCorrect,"onUpdate:modelValue":l=>e.isCorrect=l,class:x([{"is-correct":e.isCorrect}]),disabled:u.isSave,style:{"margin-left":"10px"},onChange:l=>function(e,l){"single"===ne.type?(l&&pe.value.forEach((l=>{l!==e&&(l.isCorrect=!1)})),e.isCorrect=l):"multiple"===ne.type&&(e.isCorrect=l)}(e,l)},{default:g((()=>[...d[14]||(d[14]=[A(" 支持选项 ")])])),_:2},1032,["modelValue","onUpdate:modelValue","class","disabled","onChange"])):k("v-if",!0),h($,{class:"icon"},{default:g((()=>[h(w(_),{class:x([{disabled:u.isSave}]),onClick:Ae},null,8,["class"])])),_:1}),h($,{class:"icon"},{default:g((()=>[h(w(I),{class:x([{disabled:w(pe).length<3||u.isSave}]),onClick:e=>function(e){pe.value.length<3||ne.isSave||pe.value.splice(e,1)}(l)},null,8,["class","onClick"])])),_:2},1024),1===w(ce)?(f(),b(se,{key:1,type:"primary",class:"margin-left-10",onClick:e=>{return t=l,ue.value=t,ge.value=pe.value[t].resultItem||"",void(Ce.value=!0);var t}},{default:g((()=>[S("span",null,V(e.resultItem?"编辑结果":"添加结果"),1)])),_:2},1032,["onClick"])):k("v-if",!0),2===w(ce)?(f(),b(se,{key:2,type:"primary",class:"margin-left-10",onClick:l=>function(e){e.customAnswerId=e.examAnswerId||L(),re("setRelation",ne.customId,e)}(e)},{default:g((()=>[S("span",null,V(e.answerRelations?.length?`关联了${w(Ee)(e.answerRelations)}项`:"关联检查"),1)])),_:2},1032,["onClick"])):k("v-if",!0)])))),128))]),"sort"===u.type?(f(),y("div",Y,[d[15]||(d[15]=S("div",{class:"label flex flex-justify-end"},[S("span",null,"排序答案:")],-1)),S("div",Z,[h(E,{modelValue:w(ke),"onUpdate:modelValue":d[2]||(d[2]=e=>R(ke)?ke.value=e:null),mode:"multiple",style:{width:"360px"},placeholder:"请按顺序选择排序答案","show-arrow":!0},{default:g((()=>[k(' :options="[...Array(answers.length)].map((_, i) => ({ value: String.fromCharCode(65 + i) }))" '),(f(!0),y(T,null,q(w(pe),((e,l)=>(f(),b(v,{key:l,label:e.title,value:String.fromCharCode(65+l)},null,8,["label","value"])))),128))])),_:1},8,["modelValue"])])])):k("v-if",!0),u.showAnalysis?(f(),y("div",ee,[d[16]||(d[16]=S("div",{class:"label flex flex-justify-center"},[S("span",null,"解析:")],-1)),S("div",le,[h(p,{modelValue:w(fe),"onUpdate:modelValue":d[3]||(d[3]=e=>R(fe)?fe.value=e:null),type:"textarea",rows:2,placeholder:"请输入题目解析"},null,8,["modelValue"])])])):k("v-if",!0),w(xe)?(f(),y("div",te,[d[18]||(d[18]=S("div",{class:"label flex flex-justify-center"},[S("span",null,"富文本:")],-1)),S("div",ae,[h(K,j({"model-value":w(we),"onUpdate:modelValue":d[4]||(d[4]=e=>R(we)?we.value=e:null)},w(oe),{style:{width:"100%"}}),null,16,["model-value"]),S("div",ie,[h(se,{type:"danger",onClick:Ve},{default:g((()=>d[17]||(d[17]=[A(" 删除富文本 ")]))),_:1})])])])):k("v-if",!0)])),key:"0"}:void 0]),1032,["show-edit"]),h(Be,{modelValue:w(Ce),"onUpdate:modelValue":d[11]||(d[11]=e=>R(Ce)?Ce.value=e:null),title:"添加结果",class:"customize-dialog"},{footer:g((()=>[h(he,{class:"customize-button",type:"primary",plain:"",onClick:Re},{default:g((()=>d[19]||(d[19]=[A(" 取消 ")]))),_:1}),h(he,{class:"customize-button",type:"primary",plain:"",onClick:qe},{default:g((()=>d[20]||(d[20]=[A(" 保存 ")]))),_:1})])),default:g((()=>[(f(),b(K,j({key:w(ue),"model-value":w(ge),"onUpdate:modelValue":d[10]||(d[10]=e=>R(ge)?ge.value=e:null)},w(oe),{style:{width:"100%"}}),null,16,["model-value"]))])),_:1},8,["modelValue"])],2)}}});export{se as default};
|
2
2
|
//# sourceMappingURL=subject-single.vue.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"subject-single.vue.mjs","sources":["../../../../../../../packages/components/src/subject-list/src/components/subject-single.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CirclePlus, Remove } from '@element-plus/icons-vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport SubjectAction from '../../../subject-action/src/subject-action.vue'\nimport SubjectLayout from '../../../subject-layout/src/subject-layout.vue'\nimport TinyMceEditor from '../../../tiny-mce-editor/src/tiny-mce-editor.vue'\nimport { setGuid } from '@qxs-bns/utils'\nimport { ElMessage } from 'element-plus'\n\ndefineOptions({\n name: 'QxsSubjectSingle',\n})\nconst props = defineProps<{\n orderIndex: number\n title?: string\n isSave: boolean\n showAction?: boolean\n type: 'single' | 'multiple' | 'sort'\n isEdit: boolean\n isSet: boolean\n answerList?: any\n leastAnswerCount?: number\n analysis?: string\n examExpand?: string\n examRichTextContent?: string\n showAnalysis?: boolean\n examAnswerRelationType?: number\n customId?: number\n examId?: number\n isKey: boolean\n answerCheckType: number\n}>()\nconst emits = defineEmits(['move', 'save', 'delete', 'edit', 'add', 'setRelation'])\n\nconst attrs = useAttrs()\n\nconst answersIndex = ref(0)\nconst isKey = ref(false)\nconst answerCheckType = ref(1)\nconst examAnswerRelationType = ref(1)\nconst answers = ref<{\n title: string\n isCorrect: boolean\n orderIndex?: number\n resultItem?: string\n customAnswerId?: string\n answerRelations?: {\n relationExamId: number\n relationAnswers: {\n relationAnswerId: number\n relationAnswerIndex: number\n }[]\n }[]\n}[]>([{\n title: '',\n isCorrect: false,\n}, {\n title: '',\n isCorrect: false,\n}, {\n title: '',\n isCorrect: false,\n}, {\n title: '',\n isCorrect: false,\n}])\n\nconst leastAnswerCount = ref()\nconst title = ref('')\nconst analysis = ref('')\nconst showRichText = ref(false)\nconst richText = ref('')\nconst startTime = ref(0)\nconst showRichContent = ref(false)\nconst resultItem = ref<string>('')\nconst titlePlaceholder = computed(() => {\n if (props.type === 'single') {\n return '单选题'\n }\n else if (props.type === 'multiple') {\n return '多选题'\n }\n else {\n return '排序题'\n }\n})\n\nconst orderList = ref<string[]>([])\n\nconst leastAnswerOptions = computed(() => {\n const items = []\n const length = answers.value.length\n for (let count = length; count > 1; count--) {\n items.push({\n label: `至少选择${count}项`,\n value: count,\n })\n }\n return items.reverse()\n})\nfunction addAnswer() {\n if (props.isSave) {\n return\n }\n answers.value.push({\n title: '',\n isCorrect: false,\n customAnswerId: setGuid()\n })\n}\n\nfunction deleteAnswer(index: number) {\n if (answers.value.length < 3 || props.isSave) {\n return\n }\n answers.value.splice(index, 1)\n}\n\nfunction setCorrect(it: any, event: any) {\n if (props.type === 'single') {\n // 单选题:确保只有一个支持选项\n if (event) {\n answers.value.forEach((answer: any) => {\n if (answer !== it) {\n answer.isCorrect = false\n }\n })\n }\n it.isCorrect = event\n } else if (props.type === 'multiple') {\n // 多选题:可以有多个支持选项\n it.isCorrect = event\n }\n}\nfunction setRelation(item: any) {\n item.customAnswerId = item.examAnswerId || setGuid()\n emits('setRelation', props.customId, item)\n}\n\nfunction deleteRichText() {\n showRichText.value = false\n richText.value = ''\n}\n\nfunction save() {\n if (!title.value) {\n ElMessage.error('题目标题不能为空!')\n return\n }\n let msg = ''\n let isSetCorrectAnswer = false\n // let examAnswerRelationType = null\n let correctAnswerCount = 0\n if (props.type === 'multiple' || props.type === 'single') {\n answers.value.forEach((v: any, i: number) => {\n if (!v.title) {\n msg += `选项${String.fromCharCode(65 + i)}未填写。`\n }\n if (v.isCorrect) {\n isSetCorrectAnswer = true\n correctAnswerCount++\n }\n // if (v.resultItem) {\n // examAnswerRelationType = 1\n // }\n // if (v.answerRelations?.length) {\n // examAnswerRelationType = 2\n // }\n })\n }\n else if (props.type === 'sort') {\n // 如果设置了支持选项\n if (orderList.value.length) {\n isSetCorrectAnswer = true\n }\n }\n if (msg) {\n ElMessage.error(msg)\n return\n }\n\n const uniqueAnswer = new Set(answers.value.map((item: any) => item.title))\n\n if (uniqueAnswer.size !== answers.value.length) {\n ElMessage.error('选项不能重复')\n return\n }\n\n if (props.type === 'multiple') {\n if (correctAnswerCount === 1) {\n ElMessage.error('请至少设置两个支持选项')\n return\n }\n\n if (isSetCorrectAnswer && correctAnswerCount < leastAnswerCount.value) {\n ElMessage.error('至少选几项与支持选项数不符')\n return\n }\n }\n console.log(answerCheckType.value, 111)\n \n\n if(answerCheckType.value === 2 || answerCheckType.value === 3) {\n // 必须有设置支持选项\n if (!isSetCorrectAnswer) {\n ElMessage.error('请设置支持选项')\n return\n }\n }\n\n emits('save', {\n title: title.value,\n answers: answers.value.map((item: any, index: number) => {\n return { ...item, orderIndex: index + 1 }\n }),\n examExpand: orderList.value.map((i: string) => i.charCodeAt(0) - 65 + 1).join(','),\n analysis: analysis.value,\n isSetCorrectAnswer,\n leastAnswerCount: leastAnswerCount.value,\n examRichTextContent: showRichText.value ? richText.value : '',\n examAnswerRelationType: examAnswerRelationType.value,\n isKey: isKey.value,\n answerCheckType: answerCheckType.value\n })\n}\n\nfunction init() {\n if (props.title) {\n title.value = props.title\n }\n // const customId = props.id || setGuid()\n\n if (props.answerCheckType) {\n answerCheckType.value = props.answerCheckType\n }\n if (props.isKey) {\n isKey.value = props.isKey\n }\n\n if (props.examAnswerRelationType) {\n examAnswerRelationType.value = props.examAnswerRelationType\n }\n\n if (props.answerList && props.answerList.length) {\n answers.value = props.answerList\n }\n\n if (props.leastAnswerCount) {\n leastAnswerCount.value = props.leastAnswerCount\n }\n\n if (props.examExpand) {\n // 设置支持选项 props.examExpand里是答案id\n if (props.examExpand) {\n const correctAnswerIdList = props.examExpand.split(',')\n\n // 遍历 correctAnswerIdList,直接在 props.answerList 中查找对应的 orderIndex 并转换成字母\n orderList.value = correctAnswerIdList.map((id: string) => {\n const answer = props.answerList.find((item: any) => item.answerId?.toString() === id)\n return answer ? String.fromCharCode(65 + answer.orderIndex - 1) : id\n }).filter(Boolean) // 过滤掉任何可能的空字符串\n }\n }\n\n if (props.analysis) {\n analysis.value = props.analysis\n }\n\n if (props.examRichTextContent) {\n richText.value = props.examRichTextContent\n showRichText.value = true\n }\n}\nfunction onOpenResult(i: number) {\n answersIndex.value = i\n resultItem.value = answers.value[i].resultItem || ''\n showRichContent.value = true\n}\n\nfunction onSaveResult() {\n answers.value[answersIndex.value].resultItem = resultItem.value || ''\n showRichContent.value = false\n}\nfunction onCloseResult() {\n showRichContent.value = false\n resultItem.value = ''\n}\nfunction setKey(key: boolean) {\n isKey.value = key\n}\nfunction setAnswerSetting(type: number) {\n answerCheckType.value = type\n}\n\nfunction add(type: string, canSet: boolean) {\n emits('add', type, canSet? props.examAnswerRelationType: null)\n}\n// 监听isEdit\nwatch(() => props.isEdit, () => {\n if (props.isEdit) {\n startTime.value = new Date().getTime()\n }\n})\n\nconst relationLength = computed(() => {\n return (v: any) => {\n let count = 0\n v.forEach((item: any) => {\n if (item.relationAnswers) {\n count += item.relationAnswers.length\n }\n })\n return count\n }\n})\n\nconst ns = useNamespace('subject-single')\n\nonMounted(init)\n</script>\n\n<template>\n <div :class=\"ns.e('single-exam')\">\n <SubjectLayout\n :show-edit=\"isEdit\"\n >\n <template #preview>\n <div class=\"preview\">\n <div>\n <span class=\"title\">\n {{ orderIndex + 1 }}.{{ title }}\n <span v-if=\"type === 'single'\">(单选题)</span>\n <span v-else-if=\"['multiple', 'sort'].includes(type)\">\n ({{ titlePlaceholder }}{{ leastAnswerCount ? `至少选${leastAnswerCount}项${type === 'sort' ? '并排序' : ''}` : '' }})\n </span>\n </span>\n </div>\n <div v-if=\"showRichText\">\n <div v-html=\"richText\" />\n </div>\n <div class=\"preview-answer\">\n <template v-if=\"type === 'sort'\">\n <el-checkbox\n v-for=\"(item, index) in answers\"\n :key=\"index\"\n class=\"radio\"\n :disabled=\"true\"\n >\n <span class=\"order\">\n {{ String.fromCharCode(65 + index) }}.\n </span>\n {{ item.title }}\n </el-checkbox>\n </template>\n <template v-else>\n <el-radio\n v-for=\"(item, index) in answers\"\n :key=\"index\"\n class=\"radio\"\n value=\"disabled\"\n disabled\n >\n <span class=\"order\">\n {{ String.fromCharCode(65 + index) }}.\n </span>\n {{ item.title }} \n {{ item.isCorrect ? '(支持选项)' : '' }} \n {{ examAnswerRelationType === 1 ? (item.resultItem? '(已设置结果项)' : '(未设置结果项)' ) : ''}} \n {{ examAnswerRelationType === 2 ? (item.answerRelations?.length? '(已设置关联)' : '(未设置关联)') : '' }}\n </el-radio>\n </template>\n </div>\n </div>\n </template>\n <template v-if=\"isEdit\" #edit>\n <div class=\"flex\" :class=\"[{ 'margin-bottom': showRichText }]\">\n <div class=\"label flex flex-justify-center\">\n <span>题目:</span>\n </div>\n <div style=\"flex: 1;\">\n <el-input\n v-model=\"title\"\n type=\"textarea\"\n :rows=\"2\"\n :placeholder=\"`【${titlePlaceholder}】请输入问题`\"\n :disabled=\"isSave\"\n show-word-limit\n maxlength=\"200\"\n class=\"margin-bottom\"\n />\n </div>\n </div>\n <div class=\"margin-bottom flex flex-items-center\">\n <div class=\"label flex flex-justify-center\">\n <span>设置:</span>\n </div>\n <el-select\n v-if=\"['multiple', 'sort'].includes(type)\"\n v-model=\"leastAnswerCount\"\n style=\"width: 150px;\"\n placeholder=\"至少选择几项\"\n :disabled=\"isSave\"\n >\n <el-option\n v-for=\"item in leastAnswerOptions\"\n :key=\"item.value\"\n :value=\"item.value\"\n :label=\"item.label\"\n >\n </el-option>\n </el-select>\n </div>\n <div class=\"margin-bottom answer-list\">\n <div\n v-for=\"(item, index) in answers\"\n :key=\"index\"\n class=\"answer-item flex flex-items-center\"\n >\n <span class=\"order\">{{ String.fromCharCode(65 + index) }}.</span>\n <el-input\n v-model=\"item.title\"\n class=\"input\"\n show-word-limit\n maxlength=\"100\"\n :placeholder=\"`选项${String.fromCharCode(65 + index)}`\"\n :disabled=\"isSave\"\n />\n <el-checkbox\n v-if=\"['single', 'multiple'].includes(type)\"\n v-model=\"item.isCorrect\"\n :class=\"[{ 'is-correct': item.isCorrect }]\"\n :disabled=\"isSave\"\n style=\"margin-left: 10px;\"\n @change=\"(event: any) => setCorrect(item, event)\"\n >\n 支持选项 \n </el-checkbox>\n <el-icon class=\"icon\">\n <CirclePlus\n :class=\"[{ disabled: isSave }]\"\n @click=\"addAnswer\"\n />\n </el-icon>\n <el-icon class=\"icon\">\n <Remove\n :class=\"[{ disabled: answers.length < 3 || isSave }]\"\n @click=\"deleteAnswer(index)\"\n />\n </el-icon>\n <el-link\n v-if=\"examAnswerRelationType === 1\"\n type=\"primary\"\n class=\"margin-left-10\"\n @click=\"onOpenResult(index)\"\n >\n <span>{{ item.resultItem ? '编辑结果' : '添加结果' }}</span>\n </el-link>\n <el-link\n v-if=\"examAnswerRelationType === 2\"\n type=\"primary\"\n class=\"margin-left-10\"\n @click=\"setRelation(item)\"\n >\n <span>{{ item.answerRelations?.length ? `关联了${relationLength(item.answerRelations)}项` : '关联检查' }}</span>\n </el-link>\n </div>\n </div>\n <div v-if=\"type === 'sort'\" class=\"margin-bottom flex flex-items-center\">\n <div class=\"label flex flex-justify-end\">\n <span>排序答案:</span>\n </div>\n <div style=\"flex: 1;\">\n <el-select\n v-model=\"orderList\"\n mode=\"multiple\"\n style=\"width: 360px;\"\n placeholder=\"请按顺序选择排序答案\"\n :show-arrow=\"true\"\n >\n <!-- :options=\"[...Array(answers.length)].map((_, i) => ({ value: String.fromCharCode(65 + i) }))\" -->\n <el-option\n v-for=\"(item, index) in answers\"\n :key=\"index\"\n :label=\"item.title\"\n :value=\"String.fromCharCode(65 + index)\"\n />\n </el-select>\n </div>\n </div>\n <div\n v-if=\"showAnalysis\"\n class=\"flex\"\n >\n <div class=\"label flex flex-justify-center\">\n <span>解析:</span>\n </div>\n <div style=\"flex: 1;\">\n <el-input\n v-model=\"analysis\"\n type=\"textarea\"\n :rows=\"2\"\n placeholder=\"请输入题目解析\"\n />\n </div>\n </div>\n <div v-if=\"showRichText\" class=\"margin-bottom flex\">\n <div class=\"label flex flex-justify-center\">\n <span>富文本:</span>\n </div>\n <div style=\"flex: 1;\">\n <TinyMceEditor v-model:model-value=\"richText\" v-bind=\"attrs\" style=\"width: 100%;\" />\n <div class=\"flex flex-justify-end\">\n <el-link\n type=\"danger\"\n @click=\"deleteRichText\"\n >\n 删除富文本\n </el-link>\n </div>\n </div>\n </div>\n </template>\n <SubjectAction\n v-if=\"showAction\"\n :is-edit=\"isEdit\"\n :is-set=\"isSet\"\n :isKey=\"isKey\"\n :examAnswerRelationType=\"props.examAnswerRelationType\"\n :answerCheckType=\"answerCheckType\"\n @move-up=\"emits('move', 'up')\"\n @move-down=\"emits('move', 'down')\"\n @delete=\"emits('delete')\"\n @save=\"save\"\n @edit=\"emits('edit')\"\n @add=\"add\"\n @onShowRichText=\"showRichText = true\"\n @setKey=\"setKey\"\n @setAnswerSetting=\"setAnswerSetting\"\n />\n </SubjectLayout>\n <el-dialog\n v-model=\"showRichContent\"\n title=\"添加结果\"\n class=\"customize-dialog\"\n >\n <TinyMceEditor\n :key=\"answersIndex\"\n v-model:model-value=\"resultItem\" \n v-bind=\"attrs\"\n style=\"width: 100%;\" />\n <template #footer>\n <el-button\n class=\"customize-button\"\n type=\"primary\"\n plain\n @click=\"onCloseResult\"\n >\n 取消\n </el-button>\n <el-button\n class=\"customize-button\"\n type=\"primary\"\n plain\n @click=\"onSaveResult\"\n >\n 保存\n </el-button>\n </template>\n </el-dialog>\n </div>\n</template>\n"],"names":["props","__props","emits","__emit","attrs","useAttrs","answersIndex","ref","isKey","answerCheckType","examAnswerRelationType","answers","title","isCorrect","leastAnswerCount","analysis","showRichText","richText","startTime","showRichContent","resultItem","titlePlaceholder","computed","type","orderList","leastAnswerOptions","items","count","value","length","push","label","reverse","addAnswer","isSave","customAnswerId","setGuid","deleteRichText","save","ElMessage","error","msg","isSetCorrectAnswer","correctAnswerCount","forEach","v","i","String","fromCharCode","Set","map","item","size","console","log","index","orderIndex","examExpand","charCodeAt","join","examRichTextContent","onSaveResult","onCloseResult","setKey","key","setAnswerSetting","add","canSet","watch","isEdit","Date","getTime","relationLength","relationAnswers","ns","useNamespace","onMounted","answerList","correctAnswerIdList","split","id","answer","find","answerId","toString","filter","Boolean","it","event","splice","examAnswerId","customId"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"subject-single.vue.mjs","sources":["../../../../../../../packages/components/src/subject-list/src/components/subject-single.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CirclePlus, Remove } from '@element-plus/icons-vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport SubjectAction from '../../../subject-action/src/subject-action.vue'\nimport SubjectLayout from '../../../subject-layout/src/subject-layout.vue'\nimport TinyMceEditor from '../../../tiny-mce-editor/src/tiny-mce-editor.vue'\nimport { setGuid } from '@qxs-bns/utils'\nimport { ElMessage } from 'element-plus'\n\ndefineOptions({\n name: 'QxsSubjectSingle',\n})\nconst props = defineProps<{\n orderIndex: number\n title?: string\n isSave: boolean\n showAction?: boolean\n type: 'single' | 'multiple' | 'sort'\n isEdit: boolean\n isSet: boolean\n answerList?: any\n leastAnswerCount?: number\n analysis?: string\n examExpand?: string\n examRichTextContent?: string\n showAnalysis?: boolean\n examAnswerRelationType?: number\n customId?: number\n examId?: number\n isKey: boolean\n answerCheckType: number\n}>()\nconst emits = defineEmits(['move', 'save', 'delete', 'edit', 'add', 'setRelation'])\n\nconst attrs = useAttrs()\n\nconst answersIndex = ref(0)\nconst isKey = ref(false)\nconst answerCheckType = ref(1)\nconst examAnswerRelationType = ref(1)\nconst answers = ref<{\n title: string\n isCorrect: boolean\n orderIndex?: number\n resultItem?: string\n customAnswerId?: string\n answerRelations?: {\n relationExamId: number\n relationAnswers: {\n relationAnswerId: number\n relationAnswerIndex: number\n }[]\n }[]\n}[]>([{\n title: '',\n isCorrect: false,\n}, {\n title: '',\n isCorrect: false,\n}, {\n title: '',\n isCorrect: false,\n}, {\n title: '',\n isCorrect: false,\n}])\n\nconst leastAnswerCount = ref()\nconst title = ref('')\nconst analysis = ref('')\nconst showRichText = ref(false)\nconst richText = ref('')\nconst startTime = ref(0)\nconst showRichContent = ref(false)\nconst resultItem = ref<string>('')\nconst titlePlaceholder = computed(() => {\n if (props.type === 'single') {\n return '单选题'\n }\n else if (props.type === 'multiple') {\n return '多选题'\n }\n else {\n return '排序题'\n }\n})\n\nconst orderList = ref<string[]>([])\n\nconst leastAnswerOptions = computed(() => {\n const items = []\n const length = answers.value.length\n for (let count = length; count > 1; count--) {\n items.push({\n label: `至少选择${count}项`,\n value: count,\n })\n }\n return items.reverse()\n})\nfunction addAnswer() {\n if (props.isSave) {\n return\n }\n answers.value.push({\n title: '',\n isCorrect: false,\n customAnswerId: setGuid()\n })\n}\n\nfunction deleteAnswer(index: number) {\n if (answers.value.length < 3 || props.isSave) {\n return\n }\n answers.value.splice(index, 1)\n}\n\nfunction setCorrect(it: any, event: any) {\n if (props.type === 'single') {\n // 单选题:确保只有一个支持选项\n if (event) {\n answers.value.forEach((answer: any) => {\n if (answer !== it) {\n answer.isCorrect = false\n }\n })\n }\n it.isCorrect = event\n } else if (props.type === 'multiple') {\n // 多选题:可以有多个支持选项\n it.isCorrect = event\n }\n}\nfunction setRelation(item: any) {\n item.customAnswerId = item.examAnswerId || setGuid()\n emits('setRelation', props.customId, item)\n}\n\nfunction deleteRichText() {\n showRichText.value = false\n richText.value = ''\n}\n\nfunction save() {\n if (!title.value) {\n ElMessage.error('题目标题不能为空!')\n return\n }\n let msg = ''\n let isSetCorrectAnswer = false\n // let examAnswerRelationType = null\n let correctAnswerCount = 0\n if (props.type === 'multiple' || props.type === 'single') {\n answers.value.forEach((v: any, i: number) => {\n if (!v.title?.trim()) {\n msg += `选项${String.fromCharCode(65 + i)}未填写。`\n }\n if (v.isCorrect) {\n isSetCorrectAnswer = true\n correctAnswerCount++\n }\n v.examAnswerRelationType = v.resultItem ? 1 : (v.answerRelations?.length ? 2 : null)\n })\n }\n else if (props.type === 'sort') {\n // 如果设置了支持选项\n if (orderList.value.length) {\n isSetCorrectAnswer = true\n }\n }\n if (msg) {\n ElMessage.error(msg)\n return\n }\n\n const uniqueAnswer = new Set(answers.value.map((item: any) => item.title))\n\n if (uniqueAnswer.size !== answers.value.length) {\n ElMessage.error('选项不能重复')\n return\n }\n\n if (props.type === 'multiple') {\n if (correctAnswerCount === 1) {\n ElMessage.error('请至少设置两个支持选项')\n return\n }\n\n if (isSetCorrectAnswer && correctAnswerCount < leastAnswerCount.value) {\n ElMessage.error('至少选几项与支持选项数不符')\n return\n }\n } \n\n if(answerCheckType.value === 2 || answerCheckType.value === 3) {\n // 必须有设置支持选项\n if (!isSetCorrectAnswer) {\n ElMessage.error('请设置支持选项')\n return\n }\n }\n\n emits('save', {\n title: title.value,\n answers: answers.value.map((item: any, index: number) => {\n return { ...item, orderIndex: index + 1 }\n }),\n examExpand: orderList.value.map((i: string) => i.charCodeAt(0) - 65 + 1).join(','),\n analysis: analysis.value,\n isSetCorrectAnswer,\n leastAnswerCount: leastAnswerCount.value,\n examRichTextContent: showRichText.value ? richText.value : '',\n examAnswerRelationType: examAnswerRelationType.value,\n isKey: isKey.value,\n answerCheckType: answerCheckType.value\n })\n}\n\nfunction init() {\n if (props.title) {\n title.value = props.title\n }\n // const customId = props.id || setGuid()\n\n if (props.answerCheckType) {\n answerCheckType.value = props.answerCheckType\n }\n if (props.isKey) {\n isKey.value = props.isKey\n }\n\n if (props.examAnswerRelationType) {\n examAnswerRelationType.value = props.examAnswerRelationType\n }\n\n if (props.answerList && props.answerList.length) {\n answers.value = props.answerList\n }\n\n if (props.leastAnswerCount) {\n leastAnswerCount.value = props.leastAnswerCount\n }\n\n if (props.examExpand) {\n // 设置支持选项 props.examExpand里是答案id\n if (props.examExpand) {\n const correctAnswerIdList = props.examExpand.split(',')\n\n // 遍历 correctAnswerIdList,直接在 props.answerList 中查找对应的 orderIndex 并转换成字母\n orderList.value = correctAnswerIdList.map((id: string) => {\n const answer = props.answerList.find((item: any) => item.answerId?.toString() === id)\n return answer ? String.fromCharCode(65 + answer.orderIndex - 1) : id\n }).filter(Boolean) // 过滤掉任何可能的空字符串\n }\n }\n\n if (props.analysis) {\n analysis.value = props.analysis\n }\n\n if (props.examRichTextContent) {\n richText.value = props.examRichTextContent\n showRichText.value = true\n }\n}\nfunction onOpenResult(i: number) {\n answersIndex.value = i\n resultItem.value = answers.value[i].resultItem || ''\n showRichContent.value = true\n}\n\nfunction onSaveResult() {\n answers.value[answersIndex.value].resultItem = resultItem.value || ''\n showRichContent.value = false\n}\nfunction onCloseResult() {\n showRichContent.value = false\n resultItem.value = ''\n}\nfunction setKey(key: boolean) {\n isKey.value = key\n}\nfunction setAnswerSetting(type: number) {\n answerCheckType.value = type\n}\n\nfunction add(type: string, canSet: boolean) {\n emits('add', type, canSet? props.examAnswerRelationType: null)\n}\n// 监听isEdit\nwatch(() => props.isEdit, () => {\n if (props.isEdit) {\n startTime.value = new Date().getTime()\n }\n})\n\nconst relationLength = computed(() => {\n return (v: any) => {\n let count = 0\n v.forEach((item: any) => {\n if (item.relationAnswers) {\n count += item.relationAnswers.length\n }\n })\n return count\n }\n})\n\nconst ns = useNamespace('subject-single')\n\nonMounted(init)\n</script>\n\n<template>\n <div :class=\"ns.e('single-exam')\">\n <SubjectLayout\n :show-edit=\"isEdit\"\n >\n <template #preview>\n <div class=\"preview\">\n <div>\n <span class=\"title\">\n {{ orderIndex + 1 }}.{{ title }}\n <span v-if=\"type === 'single'\">(单选题)</span>\n <span v-else-if=\"['multiple', 'sort'].includes(type)\">\n ({{ titlePlaceholder }}{{ leastAnswerCount ? `至少选${leastAnswerCount}项${type === 'sort' ? '并排序' : ''}` : '' }})\n </span>\n </span>\n </div>\n <div v-if=\"showRichText\">\n <div v-html=\"richText\" />\n </div>\n <div class=\"preview-answer\">\n <template v-if=\"type === 'sort'\">\n <el-checkbox\n v-for=\"(item, index) in answers\"\n :key=\"index\"\n class=\"radio\"\n :disabled=\"true\"\n >\n <span class=\"order\">\n {{ String.fromCharCode(65 + index) }}.\n </span>\n {{ item.title }}\n </el-checkbox>\n </template>\n <template v-else>\n <el-radio\n v-for=\"(item, index) in answers\"\n :key=\"index\"\n class=\"radio\"\n value=\"disabled\"\n disabled\n >\n <span class=\"order\">\n {{ String.fromCharCode(65 + index) }}.\n </span>\n {{ item.title }} \n {{ item.isCorrect ? '(支持选项)' : '' }} \n {{ examAnswerRelationType === 1 ? (item.resultItem? '(已设置结果项)' : '(未设置结果项)' ) : ''}} \n {{ examAnswerRelationType === 2 ? (item.answerRelations?.length? '(已设置关联)' : '(未设置关联)') : '' }}\n </el-radio>\n </template>\n </div>\n </div>\n </template>\n <template v-if=\"isEdit\" #edit>\n <div class=\"flex\" :class=\"[{ 'margin-bottom': showRichText }]\">\n <div class=\"label flex flex-justify-center\">\n <span>题目:</span>\n </div>\n <div style=\"flex: 1;\">\n <el-input\n v-model=\"title\"\n type=\"textarea\"\n :rows=\"2\"\n :placeholder=\"`【${titlePlaceholder}】请输入问题`\"\n :disabled=\"isSave\"\n show-word-limit\n maxlength=\"200\"\n class=\"margin-bottom\"\n />\n </div>\n </div>\n <div class=\"margin-bottom flex flex-items-center\">\n <div class=\"label flex flex-justify-center\">\n <span>设置:</span>\n </div>\n <el-select\n v-if=\"['multiple', 'sort'].includes(type)\"\n v-model=\"leastAnswerCount\"\n style=\"width: 150px;\"\n placeholder=\"至少选择几项\"\n :disabled=\"isSave\"\n >\n <el-option\n v-for=\"item in leastAnswerOptions\"\n :key=\"item.value\"\n :value=\"item.value\"\n :label=\"item.label\"\n >\n </el-option>\n </el-select>\n </div>\n <div class=\"margin-bottom answer-list\">\n <div\n v-for=\"(item, index) in answers\"\n :key=\"index\"\n class=\"answer-item flex flex-items-center\"\n >\n <span class=\"order\">{{ String.fromCharCode(65 + index) }}.</span>\n <el-input\n v-model=\"item.title\"\n class=\"input\"\n show-word-limit\n maxlength=\"100\"\n :placeholder=\"`选项${String.fromCharCode(65 + index)}`\"\n :disabled=\"isSave\"\n />\n <el-checkbox\n v-if=\"['single', 'multiple'].includes(type)\"\n v-model=\"item.isCorrect\"\n :class=\"[{ 'is-correct': item.isCorrect }]\"\n :disabled=\"isSave\"\n style=\"margin-left: 10px;\"\n @change=\"(event: any) => setCorrect(item, event)\"\n >\n 支持选项 \n </el-checkbox>\n <el-icon class=\"icon\">\n <CirclePlus\n :class=\"[{ disabled: isSave }]\"\n @click=\"addAnswer\"\n />\n </el-icon>\n <el-icon class=\"icon\">\n <Remove\n :class=\"[{ disabled: answers.length < 3 || isSave }]\"\n @click=\"deleteAnswer(index)\"\n />\n </el-icon>\n <el-link\n v-if=\"examAnswerRelationType === 1\"\n type=\"primary\"\n class=\"margin-left-10\"\n @click=\"onOpenResult(index)\"\n >\n <span>{{ item.resultItem ? '编辑结果' : '添加结果' }}</span>\n </el-link>\n <el-link\n v-if=\"examAnswerRelationType === 2\"\n type=\"primary\"\n class=\"margin-left-10\"\n @click=\"setRelation(item)\"\n >\n <span>{{ item.answerRelations?.length ? `关联了${relationLength(item.answerRelations)}项` : '关联检查' }}</span>\n </el-link>\n </div>\n </div>\n <div v-if=\"type === 'sort'\" class=\"margin-bottom flex flex-items-center\">\n <div class=\"label flex flex-justify-end\">\n <span>排序答案:</span>\n </div>\n <div style=\"flex: 1;\">\n <el-select\n v-model=\"orderList\"\n mode=\"multiple\"\n style=\"width: 360px;\"\n placeholder=\"请按顺序选择排序答案\"\n :show-arrow=\"true\"\n >\n <!-- :options=\"[...Array(answers.length)].map((_, i) => ({ value: String.fromCharCode(65 + i) }))\" -->\n <el-option\n v-for=\"(item, index) in answers\"\n :key=\"index\"\n :label=\"item.title\"\n :value=\"String.fromCharCode(65 + index)\"\n />\n </el-select>\n </div>\n </div>\n <div\n v-if=\"showAnalysis\"\n class=\"flex\"\n >\n <div class=\"label flex flex-justify-center\">\n <span>解析:</span>\n </div>\n <div style=\"flex: 1;\">\n <el-input\n v-model=\"analysis\"\n type=\"textarea\"\n :rows=\"2\"\n placeholder=\"请输入题目解析\"\n />\n </div>\n </div>\n <div v-if=\"showRichText\" class=\"margin-bottom flex\">\n <div class=\"label flex flex-justify-center\">\n <span>富文本:</span>\n </div>\n <div style=\"flex: 1;\">\n <TinyMceEditor v-model:model-value=\"richText\" v-bind=\"attrs\" style=\"width: 100%;\" />\n <div class=\"flex flex-justify-end\">\n <el-link\n type=\"danger\"\n @click=\"deleteRichText\"\n >\n 删除富文本\n </el-link>\n </div>\n </div>\n </div>\n </template>\n <SubjectAction\n v-if=\"showAction\"\n :is-edit=\"isEdit\"\n :is-set=\"isSet\"\n :isKey=\"isKey\"\n :examAnswerRelationType=\"props.examAnswerRelationType\"\n :answerCheckType=\"answerCheckType\"\n @move-up=\"emits('move', 'up')\"\n @move-down=\"emits('move', 'down')\"\n @delete=\"emits('delete')\"\n @save=\"save\"\n @edit=\"emits('edit')\"\n @add=\"add\"\n @onShowRichText=\"showRichText = true\"\n @setKey=\"setKey\"\n @setAnswerSetting=\"setAnswerSetting\"\n />\n </SubjectLayout>\n <el-dialog\n v-model=\"showRichContent\"\n title=\"添加结果\"\n class=\"customize-dialog\"\n >\n <TinyMceEditor\n :key=\"answersIndex\"\n v-model:model-value=\"resultItem\" \n v-bind=\"attrs\"\n style=\"width: 100%;\" />\n <template #footer>\n <el-button\n class=\"customize-button\"\n type=\"primary\"\n plain\n @click=\"onCloseResult\"\n >\n 取消\n </el-button>\n <el-button\n class=\"customize-button\"\n type=\"primary\"\n plain\n @click=\"onSaveResult\"\n >\n 保存\n </el-button>\n </template>\n </el-dialog>\n </div>\n</template>\n"],"names":["props","__props","emits","__emit","attrs","useAttrs","answersIndex","ref","isKey","answerCheckType","examAnswerRelationType","answers","title","isCorrect","leastAnswerCount","analysis","showRichText","richText","startTime","showRichContent","resultItem","titlePlaceholder","computed","type","orderList","leastAnswerOptions","items","count","value","length","push","label","reverse","addAnswer","isSave","customAnswerId","setGuid","deleteRichText","save","ElMessage","error","msg","isSetCorrectAnswer","correctAnswerCount","forEach","v","i","trim","String","fromCharCode","answerRelations","Set","map","item","size","index","orderIndex","examExpand","charCodeAt","join","examRichTextContent","onSaveResult","onCloseResult","setKey","key","setAnswerSetting","add","canSet","watch","isEdit","Date","getTime","relationLength","relationAnswers","ns","useNamespace","onMounted","answerList","correctAnswerIdList","split","id","answer","find","answerId","toString","filter","Boolean","it","event","splice","examAnswerId","customId"],"mappings":"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"}
|