import { defineComponent, ref, computed } from 'vue'
|
import BaseTable from '@/components/Table/Table'
|
import {
|
BarcodeAnalysisColumns,
|
BarcodeAnalysisType,
|
BarcodeAnalysisRow,
|
BarcodeAnalysisCurrent,
|
} from '@/widgets/BarcodeManagement/state'
|
import dayjs from 'dayjs'
|
import Search from '@/components/Search/Search'
|
import { ElMessage, ElTooltip } from 'element-plus'
|
import { _t } from '@/libs/Language/Language'
|
import BaseDialog from '../BaseDialog/BaseDialog'
|
import { useVModel } from '@vueuse/core'
|
import styles from './BarcodeAnalysisDialog.module.scss'
|
|
export default defineComponent({
|
name: 'BarcodeAnalysis',
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
selections: {
|
type: Array,
|
default: () => [],
|
},
|
radio: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
emits: ['confirm'],
|
setup(props, { emit }) {
|
const tableRef = ref()
|
const visible = useVModel(props, 'visible', emit)
|
const dataSource = ref<BarcodeAnalysisRow[]>([])
|
const searchInner = ref('')
|
const checkedList = ref<BarcodeAnalysisRow[]>([])
|
|
const onSearch = () => {
|
tableRef.value?.getList()
|
tableRef.value?.clearSelectEvent()
|
}
|
|
const onCheck = (records: BarcodeAnalysisRow[]) => {
|
checkedList.value = records
|
}
|
|
const onConfirm = () => {
|
if (checkedList.value.length === 0) {
|
ElMessage.warning(_t('请选择解析规则'))
|
return
|
}
|
if (checkedList.value.length > 1) {
|
ElMessage.warning(_t('请选择一条解析规则'))
|
return
|
}
|
console.log(checkedList.value[0], 'checkedList.value[0]')
|
emit('confirm', checkedList.value[0])
|
visible.value = false
|
}
|
|
const onClose = () => {
|
visible.value = false
|
console.log('onClose')
|
}
|
return () =>
|
visible.value ? (
|
<BaseDialog
|
title={_t('条码解析规则')}
|
v-model={visible.value}
|
width="1200"
|
height="800"
|
onClose={onClose}
|
onConfirm={onConfirm}
|
>
|
<div class={styles.barContent}>
|
<div class={styles.barHeader}>
|
<Search
|
class={styles.search}
|
onConfirm={onSearch}
|
placeholder={_t('请输入解析规则名称')}
|
v-model={searchInner.value}
|
/>
|
</div>
|
<div class={styles.tableContent}>
|
<BaseTable
|
ref={tableRef}
|
url="/api/v1/barcodemanagement/barcodeanalysis"
|
params={{ Filter: searchInner.value }}
|
v-model:dataSource={dataSource.value}
|
selections={props.selections}
|
columns={BarcodeAnalysisColumns.value}
|
isChecked={true}
|
isFooter={false}
|
radio={props.radio}
|
onCheck={onCheck}
|
v-slots={{
|
type: ({ row }) => BarcodeAnalysisType[row.type],
|
barcodeSegmentComposition: ({ row }) => (
|
<ElTooltip
|
effect="dark"
|
content={row.barcodeAnalysisDetails
|
.map((e: any) => e.name)
|
.join('/')}
|
placement="top"
|
>
|
{row.barcodeAnalysisDetails
|
.map((e: any) => e.name)
|
.join('/')}
|
</ElTooltip>
|
),
|
ruleByType: ({ row }) => {
|
switch (row.type) {
|
case 0:
|
return row.symbol
|
case 1:
|
return row.startSymbol + row.endSymbol
|
case 2:
|
return row.fixedLength
|
default:
|
return '-'
|
}
|
},
|
isUsed: ({ row }) =>
|
row.isUsed ? _t('使用中') : _t('未使用'),
|
lastModificationTime: ({ row }) =>
|
row.lastModificationTime
|
? dayjs(row.lastModificationTime).format(
|
'YYYY-MM-DD HH:mm:ss'
|
)
|
: '-',
|
}}
|
/>
|
</div>
|
</div>
|
</BaseDialog>
|
) : null
|
},
|
})
|
