<script setup lang="ts">
|
import { reactive, watch } from 'vue';
|
|
import { getAlphabetFromIndexRule } from '../helper';
|
|
const props = defineProps([
|
'dataSource',
|
'dataSetList',
|
'queryList',
|
'getCustomRowNameList',
|
'getMaxRows',
|
'jnpfUniverRef',
|
'cellFromDialogValue',
|
'startColumn',
|
'startRow',
|
]);
|
|
const emits = defineEmits(['clearCellRelevanceValue']);
|
|
interface State {
|
type: string;
|
}
|
|
const state = reactive<State>({
|
type: '',
|
});
|
const textAutoplayModeList = [
|
{ fullName: '纵向', id: 'portrait' },
|
{ fullName: '横向', id: 'landscape' },
|
];
|
const summaryTypeOptions = [
|
{ id: 'none', fullName: '无' },
|
{ id: 'sum', fullName: '合计' },
|
{ id: 'max', fullName: '最大值' },
|
{ id: 'min', fullName: '最小值' },
|
{ id: 'count', fullName: '计数' },
|
{ id: 'avg', fullName: '平均值' },
|
];
|
const groupTypeOptions = [
|
{ id: 'default', fullName: '默认分组' },
|
{ id: 'adjacent', fullName: '相邻连续分组' },
|
];
|
const polymerizationTypeOptions = [
|
{ id: '1', fullName: '列表' },
|
{ id: '2', fullName: '分组' },
|
{ id: '3', fullName: '汇总' },
|
];
|
const cellTypeOptions = [
|
{ id: 'none', fullName: '无' },
|
{ id: 'default', fullName: '默认' },
|
{ id: 'custom', fullName: '自定义' },
|
];
|
const displayTypeOptions = [
|
{ id: 'default', fullName: '默认' },
|
{ id: 'jsbarcode', fullName: '条形码' },
|
{ id: 'qrCode', fullName: '二维码' },
|
];
|
const errorCorrectionLevelOptions = [
|
{ id: 'L', fullName: 'L级7%' },
|
{ id: 'M', fullName: 'M级15%' },
|
{ id: 'Q', fullName: 'Q级25%' },
|
{ id: 'H', fullName: 'H级30%' },
|
];
|
const barcodeFormatOptions = [
|
{ id: 'code128', fullName: 'code128' },
|
{ id: 'ean13', fullName: 'ean13' },
|
{ id: 'ean8', fullName: 'ean8' },
|
{ id: 'ean5', fullName: 'ean5' },
|
{ id: 'ean2', fullName: 'ean2' },
|
{ id: 'code39', fullName: 'code39' },
|
{ id: 'itf14', fullName: 'itf14' },
|
{ id: 'msi10', fullName: 'msi10' },
|
{ id: 'msi11', fullName: 'msi11' },
|
{ id: 'pharmacode', fullName: 'pharmacode' },
|
{ id: 'upc', fullName: 'upc' },
|
{ id: 'codabar', fullName: 'codabar' },
|
];
|
|
watch(
|
() => props.cellFromDialogValue,
|
(value) => {
|
if (!value) return;
|
const str = value.match(/[a-z]+/i)[0];
|
const str1 = value.split(str);
|
props.dataSource[`${state.type}ParentCellCustomRowName`] = str;
|
props.dataSource[`${state.type}ParentCellCustomColName`] = str1[1];
|
},
|
);
|
|
function openCellByDialogSelect(type?) {
|
state.type = type || '';
|
const focusedCell = {
|
startColumn: props.startColumn,
|
startRow: props.startRow,
|
};
|
props.jnpfUniverRef.value?.getCellFromDialogSelect(focusedCell);
|
emits('clearCellRelevanceValue');
|
}
|
function onParentCellType(type) {
|
const customRowName = `${type}ParentCellCustomRowName`;
|
const customColName = `${type}ParentCellCustomColName`;
|
if (props.dataSource[`${type}ParentCellType`] == 'custom') {
|
const startColumn = type == 'top' ? (props.startRow === 0 ? 0 : props.startColumn) : props.startColumn === 0 ? 0 : props.startColumn - 1;
|
const startRow = type == 'top' ? (props.startRow === 0 ? 1 : props.startRow) : props.startColumn == 0 ? 1 : props.startRow + 1;
|
props.dataSource[customRowName] = props.dataSource[customRowName] || getAlphabetFromIndexRule(startColumn);
|
props.dataSource[customColName] = props.dataSource[customColName] || startRow;
|
}
|
}
|
</script>
|
|
<template>
|
<a-form-item label="左父格">
|
<a-radio-group v-model:value="dataSource.leftParentCellType" class="right-radio" @change="onParentCellType('left')">
|
<a-radio :key="option.id" v-for="option in cellTypeOptions" :value="option.id">
|
{{ option.fullName }}
|
</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<a-form-item v-if="dataSource.leftParentCellType === 'custom'" class="-mt-[14px]">
|
<a-input-group compact>
|
<a-select class="!w-1/3" v-model:value="dataSource.leftParentCellCustomRowName">
|
<a-select-option v-for="item in getCustomRowNameList" :key="item" :value="item">{{ item }}</a-select-option>
|
</a-select>
|
<a-input-number class="!w-1/2" :min="1" :max="getMaxRows" v-model:value="dataSource.leftParentCellCustomColName" />
|
<a-button class="!w-1/6" pre-icon="icon-ym icon-ym-select-cell" @click="openCellByDialogSelect('left')" />
|
</a-input-group>
|
</a-form-item>
|
<a-form-item label="上父格">
|
<a-radio-group v-model:value="dataSource.topParentCellType" class="right-radio" @change="onParentCellType('top')">
|
<a-radio :key="option.id" v-for="option in cellTypeOptions" :value="option.id">
|
{{ option.fullName }}
|
</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<a-form-item v-if="dataSource.topParentCellType === 'custom'" class="-mt-[14px]">
|
<a-input-group compact>
|
<a-select class="!w-1/3" v-model:value="dataSource.topParentCellCustomRowName">
|
<a-select-option v-for="item in getCustomRowNameList" :key="item" :value="item">{{ item }}</a-select-option>
|
</a-select>
|
<a-input-number class="!w-1/2" :min="1" :max="getMaxRows" v-model:value="dataSource.topParentCellCustomColName" />
|
<a-button class="!w-1/6" pre-icon="icon-ym icon-ym-select-cell" @click="openCellByDialogSelect('top')" />
|
</a-input-group>
|
</a-form-item>
|
<a-form-item label="字段名称">
|
<jnpf-tree-select v-model:value="dataSource.field" last-level last-level-key="children" :options="dataSetList" :field-names="{ value: 'jnpfId' }" />
|
</a-form-item>
|
<a-form-item label="聚合方式">
|
<jnpf-radio
|
v-model:value="dataSource.polymerizationType"
|
:options="polymerizationTypeOptions"
|
option-type="button"
|
button-style="solid"
|
class="right-radio-more" />
|
</a-form-item>
|
<a-form-item v-if="dataSource.polymerizationType === '2'" label="分组类型">
|
<jnpf-select v-model:value="dataSource.groupType" :options="groupTypeOptions" />
|
</a-form-item>
|
<a-form-item v-if="dataSource.polymerizationType === '3'" label="汇总方式">
|
<jnpf-select v-model:value="dataSource.summaryType" :options="summaryTypeOptions" />
|
</a-form-item>
|
<a-form-item v-else label="扩展方向">
|
<jnpf-radio v-model:value="dataSource.fillDirection" :options="textAutoplayModeList" option-type="button" button-style="solid" class="right-radio-more" />
|
</a-form-item>
|
<a-form-item label="补充空白行">
|
<a-switch v-model:checked="dataSource.fillEmptyRows" />
|
</a-form-item>
|
<a-form-item label="数据行倍数" v-if="dataSource.fillEmptyRows">
|
<a-input-number v-model:value="dataSource.fillEmptyNum" min="1" />
|
</a-form-item>
|
<a-form-item label="显示类型">
|
<a-radio-group v-model:value="dataSource.displayType" class="data-source-display-type-radio">
|
<a-radio :key="option.id" v-for="option in displayTypeOptions" :value="option.id">
|
{{ option.fullName }}
|
</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<template v-if="dataSource.displayType === 'qrCode'">
|
<a-form-item label="实点颜色">
|
<jnpf-color-picker v-model:value="dataSource.qrCodeOption.color.dark" size="small" />
|
</a-form-item>
|
<a-form-item label="容错率">
|
<jnpf-select v-model:value="dataSource.qrCodeOption.errorCorrectionLevel" :options="errorCorrectionLevelOptions" />
|
</a-form-item>
|
</template>
|
<template v-if="dataSource.displayType === 'jsbarcode'">
|
<a-form-item label="编码格式">
|
<jnpf-select v-model:value="dataSource.jsbarcodeOption.format" :options="barcodeFormatOptions" />
|
</a-form-item>
|
<a-form-item label="条码颜色">
|
<jnpf-color-picker v-model:value="dataSource.jsbarcodeOption.lineColor" size="small" />
|
</a-form-item>
|
<a-form-item label="宽度">
|
<a-input-number v-model:value="dataSource.jsbarcodeOption.width" placeholder="最大值100" max="100" min="0" />
|
</a-form-item>
|
</template>
|
</template>
|
