import Dialog from '@/components/BaseDialog/index.vue'
|
const BaseDialog: any = Dialog
|
import { defineComponent, nextTick, ref, SetupContext } from 'vue'
|
import styles from './PrintDialog.module.scss'
|
import { useRelationMaterial } from '@/hooks//Dialog'
|
import BaseTable from '@/components/Table/Table'
|
import Search from '@/components/Search/Search'
|
import { _t } from '@/libs/Language/Language'
|
import { useGlobalState } from '@/libs/Store/Store'
|
import { useVModel } from '@vueuse/core'
|
|
export default defineComponent({
|
name: '打印机设置',
|
props: {
|
modelValue: {
|
type: String,
|
default: '',
|
},
|
visible: {
|
type: Boolean,
|
default: null,
|
},
|
title: {
|
type: String,
|
default: '',
|
},
|
// 表格数据
|
dataSource: {
|
type: Array,
|
default: () => [],
|
},
|
// 当前起始坐标
|
index: {
|
type: Number,
|
default: 0,
|
},
|
type: {
|
type: String,
|
default: 'input',
|
},
|
readonly: {
|
type: [Boolean, Object],
|
},
|
},
|
emits: ['update:modelValue', 'update:dataSource', 'close', 'confirm'],
|
setup(props: any, ctx: SetupContext) {
|
const { visible, search, tableRef, onClose, onSelect } =
|
useRelationMaterial(props, ctx)
|
const selection = ref([])
|
const { systemConfig } = useGlobalState()
|
const data = ref([])
|
const modelValue = useVModel(props, 'modelValue', ctx.emit)
|
|
const onOpen = () => {
|
selection.value = []
|
const values: string[] = props.modelValue?.split?.(',') || []
|
data.value = systemConfig.state.value.PrintAgentConfig || []
|
|
data.value.forEach((item) => {
|
if (values.includes(`${item.printerName}_${item.printAgentIP}`)) {
|
selection.value.push(item)
|
}
|
})
|
const keys = selection.value.map((row) => row.id)
|
nextTick(() => tableRef.value?.setSelectRow(keys))
|
}
|
const onCheck = (rows) => {
|
selection.value = rows
|
}
|
const onConfirm = () => {
|
const rows = []
|
selection.value.forEach((item) => {
|
rows.push(`${item.printerName}_${item.printAgentIP}`)
|
})
|
visible.value = false
|
ctx.emit('update:modelValue', rows.join(','))
|
data.value = []
|
tableRef.value?.clearAll()
|
}
|
const onEnter = () => {
|
const PrintAgentConfig = systemConfig.state.value.PrintAgentConfig || []
|
data.value = PrintAgentConfig.filter((item) =>
|
item.printerName.includes(search.value)
|
)
|
nextTick(() => tableRef.value?.setSelectRowByObj(selection.value))
|
}
|
const Input = () => {
|
const readonly =
|
typeof props.readonly?.value === 'boolean'
|
? (props.readonly?.value as boolean)
|
: (props.readonly as boolean)
|
return (
|
<el-input
|
v-model={modelValue.value}
|
clearable={false}
|
class={styles.selectVariable}
|
placeholder={_t('请选择')}
|
readonly={readonly}
|
suffix-icon={
|
<el-button
|
link
|
type="primary"
|
size="small"
|
style="margin-right: 10px;"
|
onClick={onSelect}
|
>
|
{_t('选择')}
|
</el-button>
|
}
|
></el-input>
|
)
|
}
|
return () => {
|
return (
|
<div class={styles.relationDialog}>
|
<Input />
|
<BaseDialog
|
width="600px"
|
height="400px"
|
v-model={visible.value}
|
title={_t('打印机选择')}
|
onClose={onClose}
|
onConfirm={onConfirm}
|
onOpen={onOpen}
|
destroy-on-close
|
append-to-body
|
>
|
<div class={styles.header}>
|
<label class={styles.key}>{_t('查询')}</label>
|
<Search
|
v-model={search.value}
|
field="filter"
|
onConfirm={onEnter}
|
placeholder={_t('请输入打印机名称')}
|
/>
|
</div>
|
<div class={styles.table}>
|
<BaseTable
|
ref={tableRef}
|
columns={[
|
{
|
title: _t('序号'),
|
field: 'seq',
|
type: 'seq',
|
},
|
{
|
title: _t('打印机'),
|
field: 'printerName',
|
},
|
{
|
title: _t('IP'),
|
field: 'printAgentIP',
|
},
|
]}
|
size="mini"
|
v-model:dataSource={data.value}
|
isVScroll
|
isSeq={true}
|
isChecked={true}
|
onCheck={onCheck}
|
id="id"
|
isHidePagination
|
isStop={true}
|
/>
|
</div>
|
</BaseDialog>
|
</div>
|
)
|
}
|
},
|
})
|
