214 lines
6.1 KiB
Vue
214 lines
6.1 KiB
Vue
<template>
|
||
<!-- 基本信息的表单 -->
|
||
<div>
|
||
<a-form :model="formData" name="basic" layout="horizontal" label-wrap>
|
||
<a-form-item label="申请人" name="applicant">
|
||
<a-input :value="formData.applicant" style="width: 40%" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="申请类型" name="applyType">
|
||
<a-radio-group v-model:value="formData.applyType" button-style="solid" style="width: 40%">
|
||
<a-radio-button v-if="applyType === 'PURCHASE_RECEIPT'" value="PURCHASE_RECEIPT">采购入库</a-radio-button>
|
||
<a-radio-button v-if="applyType === 'PURCHASE_RECEIPT'" value="RETURN_RECEIPT">归还入库</a-radio-button>
|
||
<a-radio-button v-if="applyType === 'LOAN_OUT'" value="LOAN_OUT">出库外借</a-radio-button>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
<a-form-item label="申请日期" name="applyDate" style="width: 40%">
|
||
<a-date-picker v-model:value="formData.applyDate" />
|
||
</a-form-item>
|
||
<a-form-item label="选择物料" name="selected">
|
||
<a-select
|
||
v-model:value="formData.slectedList"
|
||
mode="multiple"
|
||
bordered
|
||
placeholder="请选择物料"
|
||
style="width: 40%"
|
||
show-search
|
||
:options="options"
|
||
:filter-option="filterOption"
|
||
@deselect="removeEvent($event)"
|
||
@select="insertEvent($event)"
|
||
></a-select>
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
|
||
<!-- vxe-table -->
|
||
<div>
|
||
<vxe-table
|
||
ref="tableRef"
|
||
v-model:data="tableData"
|
||
border
|
||
show-overflow
|
||
max-height="500"
|
||
size="medium"
|
||
empty-text="请先选择物料"
|
||
:edit-config="{ trigger: 'click', mode: 'cell', autoFocus: true }"
|
||
>
|
||
<vxe-column type="seq" title="序号" width="60" />
|
||
<vxe-column field="id" title="物料id" :visible="false" />
|
||
<vxe-column field="name" title="物料名称" />
|
||
<vxe-column field="code" title="编码" />
|
||
<vxe-column field="spec" title="规格" />
|
||
<vxe-column field="price" title="价格" />
|
||
<vxe-column field="type" title="类型" />
|
||
<vxe-column field="assignRule" title="是否赋码">
|
||
<template #default="{ row }">
|
||
{{ row.assignRule ? '是' : '否' }}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column
|
||
field="quantity"
|
||
title="申请数量(点击修改)"
|
||
:edit-render="{ name: 'input', autoSelect: true }"
|
||
keyboard-config="{edit: true, del: true}"
|
||
cell-type="number"
|
||
>
|
||
<template #edit="{ row }">
|
||
<vxe-number-input v-model="row.quantity" type="integer"></vxe-number-input>
|
||
</template>
|
||
</vxe-column>
|
||
|
||
<vxe-column field="oprator" title="操作">
|
||
<template #default="{ row }">
|
||
<vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { VxeTableInstance } from 'vxe-table'
|
||
import api from '@/api'
|
||
import dayjs, { Dayjs } from 'dayjs'
|
||
import { LabeledValue, DefaultOptionType } from 'ant-design-vue/es/select'
|
||
import { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
|
||
|
||
// 和外层界面的数据交互
|
||
const props = defineProps(
|
||
{
|
||
applyType: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
}, // 申请类型 applyType页面传值的使用1和2，1: 采购入库 和 归还入库 2: 出库外借
|
||
)
|
||
const getTableData = () => {
|
||
const $table = tableRef.value
|
||
return $table?.getTableData().fullData
|
||
}
|
||
const getApplyForm = () => {
|
||
return {
|
||
type: formData.value.applyType,
|
||
applicant: formData.value.applicant,
|
||
applyDate: formData.value.applyDate.format('YYYY-MM-DD HH:mm:ss'),
|
||
isConfirm: true,
|
||
result: '',
|
||
}
|
||
}
|
||
defineExpose({ getTableData, getApplyForm })
|
||
|
||
interface FormData {
|
||
applicant: string // 申请人
|
||
applyDate: Dayjs // 申请日期
|
||
applyType: string // 申请类型
|
||
slectedList: number[] // 入库物料
|
||
}
|
||
|
||
const formData = ref<FormData>({
|
||
applicant: '',
|
||
applyDate: dayjs(),
|
||
applyType: props.applyType,
|
||
slectedList: [],
|
||
})
|
||
|
||
// vxe-table相关的设置
|
||
export interface RowVO {
|
||
id: number
|
||
name: string
|
||
code: string
|
||
spec: string
|
||
type: string
|
||
quantity: number
|
||
disabled: boolean
|
||
checked: boolean
|
||
price: number
|
||
assignRule: boolean
|
||
}
|
||
const tableRef = ref<VxeTableInstance<RowVO>>()
|
||
// vxe-table 数据结果
|
||
const tableData = ref<Array<RowVO>>([])
|
||
// 物料选择器
|
||
const options = ref<{ label: string; value: number }[]>([])
|
||
const materialList = ref<material.Material[]>([])
|
||
const getMaterialList = async () => {
|
||
await api.materialApi.material.all((data) => {
|
||
materialList.value = data
|
||
})
|
||
options.value = materialList.value.map((item) => {
|
||
return { label: item.name ? item.name : '未知', value: item.id ? item.id : -1 }
|
||
})
|
||
}
|
||
getMaterialList()
|
||
|
||
// 选中时在末尾新增一行
|
||
// value: number, option: { label: string, value: number }
|
||
type Insert = SelectHandler<LabeledValue, DefaultOptionType> | undefined
|
||
const insertEvent = (value: Insert) => {
|
||
// 根据value找到对应的物料信息
|
||
const m = materialList.value.find((item) => item.id === value)
|
||
if (m) {
|
||
const row: RowVO = {
|
||
id: m.id ? m.id : -1,
|
||
name: m.name ? m.name : '',
|
||
code: m.code ? m.code : '',
|
||
spec: m.spec ? m.spec : '',
|
||
type: m.type ? m.type : '',
|
||
price: m.price ? m.price : 0,
|
||
quantity: 1,
|
||
assignRule: m.assignRule ? m.assignRule : false,
|
||
disabled: false,
|
||
checked: false,
|
||
}
|
||
const $table = tableRef.value
|
||
if ($table) {
|
||
$table.insertAt(row, -1)
|
||
}
|
||
}
|
||
}
|
||
// 过滤选项
|
||
const filterOption = (input: string, option: { label: string; value: number }) => {
|
||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
}
|
||
|
||
// 取消选中时，删除table中的行
|
||
const removeEvent = (value: Insert) => {
|
||
const $table = tableRef.value
|
||
// 根据value找到对应的行
|
||
if ($table) {
|
||
$table.getTableData().fullData.forEach((item) => {
|
||
if (item.id === value) {
|
||
$table.remove(item)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 手动删除table中的行
|
||
const removeRow = async (row: RowVO) => {
|
||
//打印tableData数组
|
||
const $table = tableRef.value
|
||
if ($table) {
|
||
// 根据row.id找到对应选中列表中的数据
|
||
formData.value.slectedList.forEach((item, index) => {
|
||
if (item.toString() === row.id.toString()) {
|
||
formData.value.slectedList.splice(index, 1)
|
||
}
|
||
})
|
||
|
||
$table.remove(row)
|
||
}
|
||
}
|
||
</script>
|