|
|
@@ -4,6 +4,8 @@ import Drawer from '@/components/Drawer/index.vue'
|
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
|
import { ColumnProps } from '@/components/TableBase/interface/index'
|
|
|
import { generateRandom } from '@/utils/common'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import * as XLSX from 'xlsx'
|
|
|
|
|
|
const isNew = ref(true)
|
|
|
const tableData = ref<any[]>([])
|
|
|
@@ -12,36 +14,83 @@ const ruleFormRef = ref<FormInstance>()
|
|
|
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
|
|
|
|
|
|
const form = ref({
|
|
|
- id: '',
|
|
|
+ id: '',
|
|
|
T_name:'',
|
|
|
T_model:'',
|
|
|
T_spec:'',
|
|
|
- T_quantity:'',
|
|
|
+ T_quantity: null as number | null,
|
|
|
T_demand:'',
|
|
|
T_remark:'',
|
|
|
T_state:1,
|
|
|
T_date:'',
|
|
|
- T_unit_price:'',
|
|
|
- T_amount:'',
|
|
|
+ T_unit_price: null as number | null,
|
|
|
+ T_amount: null as number | null,
|
|
|
T_reference_site:'',
|
|
|
+ T_reference_site_title:'',
|
|
|
+ T_bit_number:'',
|
|
|
+ T_packaging:'',
|
|
|
})
|
|
|
+
|
|
|
+// 验证整数
|
|
|
+const validateInteger = (rule: any, value: any, callback: any) => {
|
|
|
+ if (value === '' || value === null || value === undefined) {
|
|
|
+ callback()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const num = Number(value)
|
|
|
+ if (isNaN(num) || !Number.isInteger(num)) {
|
|
|
+ callback(new Error('请输入整数'))
|
|
|
+ } else if (num < 0) {
|
|
|
+ callback(new Error('数量不能为负数'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 验证小数（正数）
|
|
|
+const validateDecimal = (rule: any, value: any, callback: any) => {
|
|
|
+ if (value === '' || value === null || value === undefined) {
|
|
|
+ callback()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const num = Number(value)
|
|
|
+ if (isNaN(num)) {
|
|
|
+ callback(new Error('请输入有效的数字'))
|
|
|
+ } else if (num < 0) {
|
|
|
+ callback(new Error('价格不能为负数'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const rules = reactive<FormRules>({
|
|
|
T_name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
|
- T_quantity: [{ required: true, message: '数量', trigger: 'blur' }]
|
|
|
+ T_quantity: [
|
|
|
+ { required: true, message: '请输入数量', trigger: 'blur' },
|
|
|
+ { validator: validateInteger, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ T_unit_price: [
|
|
|
+ { validator: validateDecimal, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ T_amount: [
|
|
|
+ { validator: validateDecimal, trigger: 'blur' }
|
|
|
+ ]
|
|
|
})
|
|
|
const columns: ColumnProps[] = [
|
|
|
{ type: 'index', label: '序号', width: 80, align: 'center' },
|
|
|
{ prop: 'T_name', label: '名称', align: 'center' },
|
|
|
+ { prop: 'T_bit_number', label: '位号', align: 'center', width: 100 },
|
|
|
+ { prop: 'T_packaging', label: '封装', align: 'center', width: 100 },
|
|
|
{ prop: 'T_model', label: '型号', align: 'center', width: 100 },
|
|
|
{ prop: 'T_spec', label: '规格', align: 'center', width: 100 },
|
|
|
{ prop: 'T_quantity', label: '数量', align: 'center'},
|
|
|
- { prop: 'T_reference_site', label: '参考网址', align: 'center', width: 140 },
|
|
|
{ prop: 'T_demand', label: '需求', align: 'center', width: 140 },
|
|
|
+ { prop: 'T_date', label: '采购时间', align: 'center', width: 150 },
|
|
|
+ { prop: 'T_unit_price', label: '采购单价', align: 'center', width: 120},
|
|
|
+ { prop: 'T_amount', label: '采购金额', align: 'center', width: 120},
|
|
|
+ { prop: 'T_reference_site', label: '参考网址', align: 'center', width: 140 },
|
|
|
{ prop: 'T_remark', label: '备注', align: 'center', width: 140 },
|
|
|
- { prop: 'T_state', label: '状态', align: 'center', width: 80 },
|
|
|
- { prop: 'T_date', label: '采购时间', align: 'center', width: 120 },
|
|
|
- { prop: 'T_unit_price', label: '采购单价', align: 'center', width: 100},
|
|
|
- { prop: 'T_amount', label: '采购金额', align: 'center', width: 100},
|
|
|
+ { prop: 'T_state', label: '状态', align: 'center', width: 120 },
|
|
|
{ prop: 'operation', label: '操作', width: 160, fixed: 'right', align: 'center' }
|
|
|
]
|
|
|
|
|
|
@@ -68,11 +117,19 @@ const addPurchaseDetail = (formEl: FormInstance | undefined) => {
|
|
|
if (!formEl) return
|
|
|
formEl.validate(valid => {
|
|
|
if (valid) {
|
|
|
+ // 确保数据类型正确
|
|
|
+ const formattedData = {
|
|
|
+ ...form.value,
|
|
|
+ T_quantity: form.value.T_quantity ? parseInt(form.value.T_quantity.toString()) : 0,
|
|
|
+ T_unit_price: form.value.T_unit_price ? parseFloat(form.value.T_unit_price.toString()) : 0,
|
|
|
+ T_amount: form.value.T_amount ? parseFloat(form.value.T_amount.toString()) : 0
|
|
|
+ }
|
|
|
+
|
|
|
if (isNew.value) {
|
|
|
- tableData.value.push({ ...form.value, id: generateRandom() })
|
|
|
+ tableData.value.push({ ...formattedData, id: generateRandom() })
|
|
|
} else {
|
|
|
const index = tableData.value.findIndex(item => item.id === form.value.id)
|
|
|
- tableData.value[index] = { ...form.value }
|
|
|
+ tableData.value[index] = { ...formattedData }
|
|
|
}
|
|
|
|
|
|
nextTick(() => {
|
|
|
@@ -102,6 +159,197 @@ const props = defineProps<{ disabled: boolean; isShow?: string;typeTip?:string }
|
|
|
const disabled = computed(() => props.disabled)
|
|
|
const isShow = ref(props.isShow)
|
|
|
const typeTip = ref(props.typeTip)
|
|
|
+
|
|
|
+// 导入Excel文件
|
|
|
+const importDialogVisible = ref(false)
|
|
|
+const fileInputRef = ref<HTMLInputElement | null>(null)
|
|
|
+const uploadFileList = ref<any[]>([])
|
|
|
+const tempImportData = ref<any[]>([]) // 临时存储解析的数据
|
|
|
+
|
|
|
+const handleImportExcel = () => {
|
|
|
+ importDialogVisible.value = true
|
|
|
+ uploadFileList.value = []
|
|
|
+ tempImportData.value = []
|
|
|
+}
|
|
|
+
|
|
|
+// 下载模板
|
|
|
+const handleDownloadTemplate = () => {
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = '/采购申请模版.xlsx'
|
|
|
+ link.download = '采购申请模版.xlsx'
|
|
|
+ link.click()
|
|
|
+ ElMessage.success('模板下载成功')
|
|
|
+}
|
|
|
+
|
|
|
+// 解析Excel文件
|
|
|
+const parseExcelFile = (file: File) => {
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = (e) => {
|
|
|
+ try {
|
|
|
+ const data = e.target?.result
|
|
|
+ const workbook = XLSX.read(data, { type: 'array' })
|
|
|
+
|
|
|
+ // 读取第一个sheet
|
|
|
+ const firstSheetName = workbook.SheetNames[0]
|
|
|
+ const worksheet = workbook.Sheets[firstSheetName]
|
|
|
+
|
|
|
+ // 将sheet转换为JSON
|
|
|
+ const jsonData: any[] = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
|
|
|
+
|
|
|
+ // 辅助函数：解码HTML实体
|
|
|
+ const decodeHTMLEntities = (text: string): string => {
|
|
|
+ const textarea = document.createElement('textarea')
|
|
|
+ textarea.innerHTML = text
|
|
|
+ return textarea.value
|
|
|
+ }
|
|
|
+
|
|
|
+ // 辅助函数：获取单元格超链接
|
|
|
+ const getCellHyperlink = (worksheet: any, rowIndex: number, colIndex: number): string => {
|
|
|
+ // 将列索引转换为Excel列字母（0->A, 1->B, ..., 10->K）
|
|
|
+ const colLetter = String.fromCharCode(65 + colIndex)
|
|
|
+ // Excel行号从1开始，但我们的数据从第2行开始（索引1对应Excel的第2行）
|
|
|
+ const cellAddress = `${colLetter}${rowIndex + 1}`
|
|
|
+ const cell = worksheet[cellAddress]
|
|
|
+
|
|
|
+ // 检查单元格是否有超链接
|
|
|
+ if (cell && cell.l && cell.l.Target) {
|
|
|
+ // 解码HTML实体，将 & 转换回 &
|
|
|
+ return decodeHTMLEntities(cell.l.Target)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果没有超链接，返回单元格的文本值
|
|
|
+ // return cell ? (cell.v || '') : ''
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+ // 解析数据（从第2行开始，跳过标题行）
|
|
|
+ const parsedData: any[] = []
|
|
|
+
|
|
|
+ for (let i = 1; i < jsonData.length; i++) {
|
|
|
+ const row = jsonData[i]
|
|
|
+ if (!row || row.length === 0) continue
|
|
|
+
|
|
|
+ // 获取参考网址的超链接（第11列，索引为10）
|
|
|
+ const referenceSite = getCellHyperlink(worksheet, i, 10)
|
|
|
+
|
|
|
+ // 数据类型转换
|
|
|
+ const quantity = row[5] ? parseInt(row[5].toString()) : 0
|
|
|
+ const unitPrice = row[8] ? parseFloat(row[8].toString()) : 0
|
|
|
+ const amount = row[9] ? parseFloat(row[9].toString()) : 0
|
|
|
+
|
|
|
+ // 根据Excel列映射到表单字段
|
|
|
+ const item = {
|
|
|
+ id: generateRandom(),
|
|
|
+ T_name: row[1] || '', // 名称
|
|
|
+ T_bit_number: row[2] || '', // 位号
|
|
|
+ T_packaging: row[3] || '', // 封装
|
|
|
+ T_model: '', // 型号
|
|
|
+ T_spec: row[4] || '', // 规格
|
|
|
+ T_quantity: quantity, // 数量（整数）
|
|
|
+ T_demand: (row[6] !== undefined && row[6] !== null) ? row[6].toString() : '', // 需求（转换为字符串）
|
|
|
+ T_unit_price: unitPrice, // 采购单价（小数）
|
|
|
+ T_amount: amount, // 采购金额（小数）
|
|
|
+ T_reference_site: referenceSite, // 参考网址（超链接）
|
|
|
+ T_reference_site_title: row[10] || '', // 参考网址标题
|
|
|
+ T_remark: row[11] || '', // 备注
|
|
|
+ T_state: 1, // 状态：待采购
|
|
|
+ T_date: '' // 采购时间
|
|
|
+ }
|
|
|
+
|
|
|
+ parsedData.push(item)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (parsedData.length > 0) {
|
|
|
+ tempImportData.value = parsedData
|
|
|
+ ElMessage.success(`文件解析成功，共 ${parsedData.length} 条有效数据`)
|
|
|
+ } else {
|
|
|
+ ElMessage.warning('未找到有效数据')
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Excel解析错误:', error)
|
|
|
+ ElMessage.error('Excel文件解析失败，请检查文件格式')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ reader.onerror = () => {
|
|
|
+ ElMessage.error('文件读取失败')
|
|
|
+ }
|
|
|
+
|
|
|
+ reader.readAsArrayBuffer(file)
|
|
|
+}
|
|
|
+
|
|
|
+// 文件列表改变
|
|
|
+const handleFileChange = (file: any, fileList: any[]) => {
|
|
|
+ uploadFileList.value = fileList
|
|
|
+
|
|
|
+ // 当文件被选中时，立即解析
|
|
|
+ if (file && file.raw) {
|
|
|
+ const isExcel = file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
|
|
|
+ file.raw.type === 'application/vnd.ms-excel'
|
|
|
+ if (!isExcel) {
|
|
|
+ ElMessage.error('只能上传Excel文件!')
|
|
|
+ uploadFileList.value = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+ parseExcelFile(file.raw)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 提交导入
|
|
|
+const handleSubmitImport = () => {
|
|
|
+ if (tempImportData.value.length === 0) {
|
|
|
+ ElMessage.warning('请先上传Excel文件')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 将解析的数据添加到表格
|
|
|
+ tableData.value.push(...tempImportData.value)
|
|
|
+ ElMessage.success(`成功导入 ${tempImportData.value.length} 条数据`)
|
|
|
+ emit('onPlanning', tableData.value)
|
|
|
+
|
|
|
+ // 关闭对话框并清空数据
|
|
|
+ importDialogVisible.value = false
|
|
|
+ uploadFileList.value = []
|
|
|
+ tempImportData.value = []
|
|
|
+}
|
|
|
+
|
|
|
+// 批量设置采购时间
|
|
|
+const batchDateDialogVisible = ref(false)
|
|
|
+const batchDate = ref('')
|
|
|
+
|
|
|
+const handleBatchSetDate = () => {
|
|
|
+ batchDateDialogVisible.value = true
|
|
|
+ batchDate.value = ''
|
|
|
+}
|
|
|
+
|
|
|
+const confirmBatchSetDate = () => {
|
|
|
+ if (!batchDate.value) {
|
|
|
+ ElMessage.warning('请选择日期')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ tableData.value.forEach((item: any) => {
|
|
|
+ item.T_date = batchDate.value
|
|
|
+ })
|
|
|
+
|
|
|
+ ElMessage.success('批量设置成功')
|
|
|
+ emit('onPlanning', tableData.value)
|
|
|
+ batchDateDialogVisible.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// 处理表格内数据变化
|
|
|
+const handleCellValueChange = (row: any, field: string, value: any) => {
|
|
|
+ row[field] = value
|
|
|
+ emit('onPlanning', tableData.value)
|
|
|
+}
|
|
|
+
|
|
|
+// 格式化数字显示，0值显示为空
|
|
|
+const formatNumberDisplay = (value: any) => {
|
|
|
+ if (value === 0 || value === '0' || value === null || value === undefined) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return value
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -116,6 +364,7 @@ const typeTip = ref(props.typeTip)
|
|
|
>
|
|
|
<template v-for="item in columns" :key="item.prop">
|
|
|
|
|
|
+ <!-- 状态列 -->
|
|
|
<el-table-column
|
|
|
v-if="item.prop === 'T_state'"
|
|
|
:label="item.label"
|
|
|
@@ -123,18 +372,142 @@ const typeTip = ref(props.typeTip)
|
|
|
align="center"
|
|
|
>
|
|
|
<template v-slot="scope">
|
|
|
- <el-text v-if="scope.row.T_state === 1" effect="dark">待采购</el-text>
|
|
|
- <el-text v-else type="success" effect="dark">已采购</el-text>
|
|
|
+ <template v-if="isShow !== 'myPurchase' && typeTip !== 'view'">
|
|
|
+ <el-select
|
|
|
+ v-model="scope.row.T_state"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="handleCellValueChange(scope.row, 'T_state', scope.row.T_state)"
|
|
|
+ >
|
|
|
+ <el-option :label="'待采购'" :value="1" />
|
|
|
+ <el-option :label="'已采购'" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-text v-if="scope.row.T_state === 1" effect="dark">待采购</el-text>
|
|
|
+ <el-text v-else type="success" effect="dark">已采购</el-text>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-else-if="item.prop === 'T_reference_site'"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <!-- 如果有链接地址，显示为可点击链接 -->
|
|
|
+ <a
|
|
|
+ v-if="scope.row.T_reference_site"
|
|
|
+ :href="scope.row.T_reference_site"
|
|
|
+ target="_blank"
|
|
|
+ style="color: #409eff; text-decoration: underline;"
|
|
|
+ >
|
|
|
+ {{ scope.row.T_reference_site_title || '参考网址' }}
|
|
|
+ </a>
|
|
|
+ <!-- 如果没有链接地址但有标题，显示纯文本 -->
|
|
|
+ <span v-else-if="scope.row.T_reference_site_title">{{ scope.row.T_reference_site_title }}</span>
|
|
|
+ <!-- 两者都没有，显示 - -->
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 采购时间可编辑列 -->
|
|
|
+ <el-table-column
|
|
|
+ v-else-if="item.prop === 'T_date' && isShow !== 'myPurchase'"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <span style="cursor: pointer; color: #409eff" @click="handleBatchSetDate" title="点击批量设置时间">
|
|
|
+ {{ item.label }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="scope.row.T_date"
|
|
|
+ type="date"
|
|
|
+ placeholder="采购时间"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="typeTip === 'view'"
|
|
|
+ @change="handleCellValueChange(scope.row, 'T_date', scope.row.T_date)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 采购单价可编辑列 -->
|
|
|
+ <el-table-column
|
|
|
+ v-else-if="item.prop === 'T_unit_price' && isShow !== 'myPurchase'"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-input-number
|
|
|
+ v-model="scope.row.T_unit_price"
|
|
|
+ :min="0"
|
|
|
+ :precision="2"
|
|
|
+ :controls="false"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%; text-align: left"
|
|
|
+ :disabled="typeTip === 'view'"
|
|
|
+ :placeholder="scope.row.T_unit_price === 0 ? '' : '请输入单价'"
|
|
|
+ @change="handleCellValueChange(scope.row, 'T_unit_price', scope.row.T_unit_price)"
|
|
|
+ @blur="scope.row.T_unit_price === 0 && (scope.row.T_unit_price = null)"
|
|
|
+ @focus="scope.row.T_unit_price === null && (scope.row.T_unit_price = 0)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 采购金额可编辑列 -->
|
|
|
+ <el-table-column
|
|
|
+ v-else-if="item.prop === 'T_amount' && isShow !== 'myPurchase'"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-input-number
|
|
|
+ v-model="scope.row.T_amount"
|
|
|
+ :min="0"
|
|
|
+ :precision="2"
|
|
|
+ :controls="false"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%; text-align: left"
|
|
|
+ :disabled="typeTip === 'view'"
|
|
|
+ :placeholder="scope.row.T_amount === 0 ? '' : '请输入金额'"
|
|
|
+ @change="handleCellValueChange(scope.row, 'T_amount', scope.row.T_amount)"
|
|
|
+ @blur="scope.row.T_amount === 0 && (scope.row.T_amount = null)"
|
|
|
+ @focus="scope.row.T_amount === null && (scope.row.T_amount = 0)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 备注可编辑列 -->
|
|
|
+ <el-table-column
|
|
|
+ v-else-if="item.prop === 'T_remark' && isShow !== 'myPurchase'"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.T_remark"
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ size="small"
|
|
|
+ :disabled="typeTip === 'view'"
|
|
|
+ @change="handleCellValueChange(scope.row, 'T_remark', scope.row.T_remark)"
|
|
|
+ />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column show-overflow-tooltip v-bind="item" v-else-if="item.type === 'index'"></el-table-column>
|
|
|
<el-table-column show-overflow-tooltip v-bind="item" v-else-if="item.fixed !== 'right' && item.type !== 'index'"> </el-table-column>
|
|
|
- <el-table-column show-overflow-tooltip v-bind="item" v-else-if="item.fixed === 'right'">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button size="small" :disabled="typeTip === 'view'" type="primary" @click="openProductionDetailed('edit', row)"
|
|
|
+ <el-table-column show-overflow-tooltip v-bind="item" v-else-if="item.fixed === 'right' && isShow === 'myPurchase' && typeTip !== 'view'">
|
|
|
+ <template #default="{ row }" >
|
|
|
+ <el-button size="small" type="primary" @click="openProductionDetailed('edit', row)"
|
|
|
>编辑</el-button
|
|
|
>
|
|
|
- <el-button size="small" :disabled="isShow !== 'myPurchase' || typeTip === 'view'" type="danger" @click="deletePurchaseDetail(row.id)"
|
|
|
+ <el-button size="small" type="danger" @click="deletePurchaseDetail(row.id)"
|
|
|
>删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -143,16 +516,104 @@ const typeTip = ref(props.typeTip)
|
|
|
<el-button type="primary" :disabled="disabled" @click="openProductionDetailed('new')">
|
|
|
<el-icon><Plus /></el-icon><span style="margin-left: 6px">添加</span>
|
|
|
</el-button>
|
|
|
+ <el-button type="success" :disabled="disabled" @click="handleImportExcel" style="margin-left: 10px">
|
|
|
+ <el-icon><Plus /></el-icon><span style="margin-left: 6px">导入Excel</span>
|
|
|
+ </el-button>
|
|
|
</template>
|
|
|
</el-table>
|
|
|
+
|
|
|
+ <!-- 导入Excel对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="importDialogVisible"
|
|
|
+ title="导入Excel数据"
|
|
|
+ width="500px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div style="margin-bottom: 20px">
|
|
|
+ <el-alert
|
|
|
+ title="请先下载模板，按照模板格式填写数据后上传"
|
|
|
+ type="info"
|
|
|
+ :closable="false"
|
|
|
+ show-icon
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-bottom: 20px; text-align: center">
|
|
|
+ <el-button type="primary" @click="handleDownloadTemplate">
|
|
|
+ <el-icon><Download /></el-icon>
|
|
|
+ <span style="margin-left: 6px">下载模板</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-upload
|
|
|
+ drag
|
|
|
+ :file-list="uploadFileList"
|
|
|
+ :on-change="handleFileChange"
|
|
|
+ :auto-upload="false"
|
|
|
+ accept=".xlsx,.xls"
|
|
|
+ :limit="1"
|
|
|
+ >
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 将文件拖到此处，或<em>点击上传</em>
|
|
|
+ </div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ 只能上传 xlsx/xls 文件
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="handleSubmitImport">提交</el-button>
|
|
|
+ <el-button @click="importDialogVisible = false">取消</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 批量设置采购时间对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="batchDateDialogVisible"
|
|
|
+ title="批量设置采购时间"
|
|
|
+ width="400px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <el-form label-width="100px">
|
|
|
+ <el-form-item label="采购时间：">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="batchDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择采购时间"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="confirmBatchSetDate">确定</el-button>
|
|
|
+ <el-button @click="batchDateDialogVisible = false">取消</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
<Drawer ref="drawerRef" :handleClose="callbackDrawer">
|
|
|
<template #header="{ params }">
|
|
|
<h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 采购明细</h4>
|
|
|
</template>
|
|
|
+
|
|
|
<el-form ref="ruleFormRef" :model="form" :rules="rules">
|
|
|
<el-form-item label="名称：" :label-width="formLabelWidth" prop="T_name">
|
|
|
<el-input v-model="form.T_name" type="text" autocomplete="off" placeholder="请输入名称" />
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="位号：" :label-width="formLabelWidth" prop="T_bit_number">
|
|
|
+ <el-input v-model="form.T_bit_number" type="text" autocomplete="off" placeholder="请输入位号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="封装：" :label-width="formLabelWidth" prop="T_packaging">
|
|
|
+ <el-input v-model="form.T_packaging" type="text" autocomplete="off" placeholder="请输入封装" />
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="型号：" :label-width="formLabelWidth" prop="T_model">
|
|
|
<el-input v-model="form.T_model" type="text" autocomplete="off" placeholder="请输入型号" />
|
|
|
</el-form-item>
|
|
|
@@ -160,7 +621,16 @@ const typeTip = ref(props.typeTip)
|
|
|
<el-input v-model="form.T_spec" type="text" autocomplete="off" placeholder="请输入规格" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="数量：" :label-width="formLabelWidth" prop="T_quantity">
|
|
|
- <el-input v-model="form.T_quantity" type="text" autocomplete="off" placeholder="请输入数量" />
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.T_quantity"
|
|
|
+ :min="0"
|
|
|
+ :precision="0"
|
|
|
+ :controls="false"
|
|
|
+ placeholder="请输入数量"
|
|
|
+ style="width: 100%; text-align: left"
|
|
|
+ @blur="form.T_quantity === 0 && (form.T_quantity = null)"
|
|
|
+ @focus="form.T_quantity === null && (form.T_quantity = 0)"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="参考网址：" :label-width="formLabelWidth" prop="T_reference_site">
|
|
|
<el-input v-model="form.T_reference_site" type="text" autocomplete="off" placeholder="请输入参考网址" />
|
|
|
@@ -189,10 +659,28 @@ const typeTip = ref(props.typeTip)
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="采购单价：" :label-width="formLabelWidth" prop="T_unit_price">
|
|
|
- <el-input v-model="form.T_unit_price" type="text" autocomplete="off" placeholder="请输入采购单价" />
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.T_unit_price"
|
|
|
+ :min="0"
|
|
|
+ :precision="2"
|
|
|
+ :controls="false"
|
|
|
+ placeholder="请输入采购单价"
|
|
|
+ style="width: 100%; text-align: left"
|
|
|
+ @blur="form.T_unit_price === 0 && (form.T_unit_price = null)"
|
|
|
+ @focus="form.T_unit_price === null && (form.T_unit_price = 0)"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="isShow !== 'myPurchase'" label="采购金额：" :label-width="formLabelWidth" prop="T_amount">
|
|
|
- <el-input v-model="form.T_amount" type="text" autocomplete="off" placeholder="请输入采购金额" />
|
|
|
+ <el-form-item label="采购金额：" :label-width="formLabelWidth" prop="T_amount">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.T_amount"
|
|
|
+ :min="0"
|
|
|
+ :precision="2"
|
|
|
+ :controls="false"
|
|
|
+ placeholder="请输入采购金额"
|
|
|
+ style="width: 100%; text-align: left"
|
|
|
+ @blur="form.T_amount === 0 && (form.T_amount = null)"
|
|
|
+ @focus="form.T_amount === null && (form.T_amount = 0)"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item :label-width="formLabelWidth">
|
|
|
<el-button v-if="isNew" class="btn" type="primary" @click="addPurchaseDetail(ruleFormRef)"
|
|
|
@@ -213,4 +701,35 @@ const typeTip = ref(props.typeTip)
|
|
|
.el-form-item {
|
|
|
margin-bottom: 18px;
|
|
|
}
|
|
|
+
|
|
|
+// 数字输入框样式优化
|
|
|
+:deep(.el-input-number) {
|
|
|
+ .el-input__inner {
|
|
|
+ text-align: left !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 当值为0时隐藏显示
|
|
|
+ &.is-empty .el-input__inner {
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 表格中的数字输入框
|
|
|
+:deep(.el-table .el-input-number) {
|
|
|
+ .el-input__inner {
|
|
|
+ text-align: left !important;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover .el-input__inner {
|
|
|
+ background: #f5f7fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-focus .el-input__inner {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #409eff;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
zoie