| | |
| | | |
| | | <!-- @toolbar-button-click="toolbarButtonClickEvent"--> |
| | | <!-- 下拉显示所有信息插槽--> |
| | | <template #content="{ row}"> |
| | | <template #content="{ row }"> |
| | | <ul class="expand-wrapper"> |
| | | <li v-for="(item,key,index) in row"> |
| | | <span style="font-weight: bold">{{ key + ': ' }}</span> |
| | | <span>{{ item }}</span> |
| | | <li v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined "> |
| | | <span style="font-weight: bold">{{ item.title + ': ' }}</span> |
| | | <span>{{ row[item.field] }}</span> |
| | | </li> |
| | | </ul> |
| | | </template> |
| | |
| | | |
| | | |
| | | <!-- 详情框 部分1--> |
| | | <vxe-modal v-model="showDetails" title="查看详情" width="600" height="80%" :mask="false" :lock-view="false" resize> |
| | | <el-container > |
| | | <vxe-modal v-model="showDetails" title="查看详情" width="600" height="80%" :mask="false" :lock-view="false" |
| | | resize> |
| | | <el-container> |
| | | <el-header height="35px" |
| | | style="margin: 0;padding: 0"> |
| | | |
| | | <el-input v-model="showCGDH" placeholder="采购单号" disabled > |
| | | <el-input v-model="showCGDH" placeholder="采购单号" disabled> |
| | | <template #prepend>采购单号:</template> |
| | | </el-input> |
| | | </el-header> |
| | |
| | | |
| | | |
| | | <script setup> |
| | | |
| | | import {ref} from "vue"; |
| | | import {reactive} from "vue"; |
| | | import {useRouter} from 'vue-router' |
| | | import {Search} from "@element-plus/icons-vue"; |
| | | import dayjs from "dayjs"; |
| | | import {VXETable} from "vxe-table"; |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | |
| | | |
| | | let router = useRouter() |
| | | const getTableRow = (row, type) => { |
| | | switch (type) { |
| | | case 'edit' : { |
| | | //alert('我接收到子组件传送的编辑信息') |
| | | router.push({path: '/main/purchaseOrder/CreatePurchaseOrder', query: {id: row.id}}) |
| | | router.push({path: '/main/purchaseOrder/DetailsPurchaseOrder', query: {id: row.id}}) |
| | | break |
| | | } |
| | | case 'delete': { |
| | | |
| | | |
| | | |
| | | alert('我接收到子组件传送的删除信息'+row.id) |
| | | alert('我接收到子组件传送的删除信息' + row.id) |
| | | break |
| | | } |
| | | } |
| | | } |
| | | |
| | | const xGrid = ref() |
| | | |
| | | const gridEvents = { |
| | | toolbarButtonClick({code}) { |
| | | const $grid = xGrid.value |
| | | if ($grid) { |
| | | switch (code) { |
| | | case 'Add': {//新增 |
| | | router.push({path: '/main/purchaseOrder/CreatePurchaseOrder'}) |
| | | break |
| | | } |
| | | case 'Sure':{ |
| | | case 'Sure': { |
| | | if ($grid.getCheckboxRecords().length === 0) { |
| | | openAlert({type: 'message', content: '请选择至少一条数据', status: 'warning'}) |
| | | //VXETable.modal.message( '请选择一条数据!') |
| | | |
| | | MessageShow('请选择至少一条数据!', 'warning'); |
| | | |
| | | return |
| | | } else { |
| | | const type = VXETable.modal.confirm('您选择了' + $grid.getCheckboxRecords().length + '条数据!,是否确认退货?'); |
| | | //openAlert({type:'alert', content: '成功入库'+$grid.getCheckboxRecords().length+'条数据!', status: 'success' }) |
| | | //VXETable.modal.message( '请选择一条数据!') |
| | | return |
| | | |
| | | MessageConfirmShow('确定', '您选择了' + $grid.getCheckboxRecords().length + '条数据!,是否确认退货?') |
| | | } |
| | | break |
| | | } |
| | | case 'Log':{ |
| | | |
| | | openAlert({type: 'alert', content: '点击了退货记录', status: 'success'}) |
| | | case 'Log': { |
| | | MessageAlertShow('点击了退货记录!', '操作提示'); |
| | | break |
| | | } |
| | | |
| | | } |
| | | } |
| | | }, |
| | |
| | | }, |
| | | } |
| | | |
| | | const openAlert = (options) => { |
| | | if(options.type==='message'){ |
| | | VXETable.modal.message(options) |
| | | }else{ |
| | | VXETable.modal.alert(options) |
| | | } |
| | | |
| | | } |
| | | const closeAlert = (id) => { |
| | | VXETable.modal.close(id) |
| | | } |
| | | //查询按钮方法 |
| | | const BtnSearchPurchaseOrder = () => { |
| | | |
| | | const confirmEvent = async () => { |
| | | const type = await VXETable.modal.confirm('您确定要删除吗?') |
| | | VXETable.modal.message({ content: `点击了 ${type}` }) |
| | | } |
| | | //开始时间,结束时间获取 |
| | | //MessageShow("开始时间"+datevalue._rawValue[0]+"\r\n结束时间\r\n"+datevalue._rawValue[1]); |
| | | |
| | | const BtnSearchPurchaseOrder =()=>{ |
| | | for (let i = 1; i < 6; i++) { |
| | | const randomInt = Math.floor(Math.random() * 999) + 1000;//4位数随机数 |
| | | const randomSumInt = Math.floor(Math.random() * 99) + 10;//2位数随机数 |
| | | const randomOrderInt = Math.floor(Math.random() * 99) + 100;//3位数随机数 |
| | | const t = i % 2 === 0 ? 5 : 6; |
| | | const s = i % 2 === 0 ? '入库' :i % 3 === 0?'退货':'部分入库'; |
| | | const thdh = i % 2 === 0 ? '' :i % 3 === 0?'THID'+randomOrderInt:''; |
| | | const s = i % 2 === 0 ? '入库' : i % 3 === 0 ? '退货' : '部分入库'; |
| | | const thdh = i % 2 === 0 ? '' : i % 3 === 0 ? 'THID' + randomOrderInt : ''; |
| | | const CGNo = 'NGCG231200' + randomOrderInt;//采购编号 |
| | | const wlNo = 'NGWL1000' + randomInt; |
| | | const xh = 'NGXH' + randomSumInt; |
| | | const wlmc = 'WLMC' + randomInt; |
| | | const gys = '供应商' + randomSumInt; |
| | | const xhdh='NG231200'+randomOrderInt; |
| | | const xhdh = 'NG231200' + randomOrderInt; |
| | | const w = i % 2 === 0 ? '3300' : i % 3 === 0 ? '3660' : i % 4 === 0 ? '2250' : '2580'; |
| | | const h = i % 2 === 0 ? '2440' : i % 3 === 0 ? '2440' : i % 4 === 0 ? '2000' : '2300'; |
| | | const dw = i % 2 === 0 ? '片' : i % 3 === 0 ? '平米' : i % 4 === 0 ? '包' : '吨'; |
| | | now.setDate(now.getDate() + 1); |
| | | gridOptions.data.push({ |
| | | cgdh: CGNo, |
| | | thdh:thdh, |
| | | thdh: thdh, |
| | | h: t, |
| | | xh: xh, |
| | | wlbh: wlNo, |
| | |
| | | w: w, |
| | | g: h, |
| | | dw: dw, |
| | | cgzt:s, |
| | | rq:dayjs(now).format('YYYY-MM-DD'), |
| | | yl:randomSumInt, |
| | | sl:randomOrderInt, |
| | | xsdh:xhdh, |
| | | je:randomInt, |
| | | cgzt: s, |
| | | rq: dayjs(now).format('YYYY-MM-DD'), |
| | | yl: randomSumInt, |
| | | sl: randomOrderInt, |
| | | xsdh: xhdh, |
| | | je: randomInt, |
| | | 6: '139xxxxxxxx', |
| | | |
| | | }) |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | | |
| | | //组件接收参数 |
| | |
| | | showStatus: true |
| | | }, |
| | | columns: [ |
| | | {type: 'expand', title: '', fixed: "left", slots: {content: 'content'}, width: 50},//详情 |
| | | {title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"}, |
| | | {type: 'checkbox', fixed: "left", title: '', width: 50}, |
| | | {type: 'seq', fixed: "left", title: ' ', width: 50}, |
| | | { type: 'checkbox',fixed:"left", title: '', width: 50 }, |
| | | {type: 'expand', title:'详情', fixed: "left", slots: {content: 'content'}, width: 50}, |
| | | {field: 'thdh', width: '10%', title: '退货单号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'cgdh', width: '10%', title: '采购单号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | |
| | | |
| | | { |
| | | field: 'thdh', |
| | | width: '10%', |
| | | title: '退货单号', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | { |
| | | field: 'cgdh', |
| | | width: '10%', |
| | | title: '采购单号', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | {field: 'cgzt', width: '10%', title: '状态', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'gys', width: '10%',title: '供应商', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'wlbh', width: '10%',title: '物料编号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'wlmc', width: '10%', title: '物料名称', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'w', width: '8%',title: '宽度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'g', width: '8%',title: '高度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'h', width: '8%',title: '厚度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'xh', width: '8%',title: '型号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'dw', width: '8%',title: '单位', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: '6', width: '12%',title: '不含税单价', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'sl', width: '8%',title: '数量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'sl', width: '12%',title: '已采购数量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'je', width: '8%',title: '金额', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'je', width: '12%',title: '不含税金额', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: '6', width: '8%',title: '税率', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'sl', width: '8%',title: '库存', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'yl', width: '10%',title: '周用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'yl', width: '10%',title: '月用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'cgzt', width: '10%',title: '单据状态', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'xsdh', width: '10%',title: '销售单号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'rq', width: '10%',title: '制单日期', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | { |
| | | field: 'gys', |
| | | width: '10%', |
| | | title: '供应商', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | { |
| | | field: 'wlbh', |
| | | width: '10%', |
| | | title: '物料编号', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | { |
| | | field: 'wlmc', |
| | | width: '10%', |
| | | title: '物料名称', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | {field: 'w', width: '8%', title: '宽度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'g', width: '8%', title: '高度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'h', width: '8%', title: '厚度', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'xh', width: '8%', title: '型号', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'dw', width: '8%', title: '单位', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | { |
| | | field: '6', |
| | | width: '12%', |
| | | title: '不含税单价', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | {field: 'sl', width: '8%', title: '数量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | { |
| | | field: 'sl', |
| | | width: '12%', |
| | | title: '已采购数量', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | {field: 'je', width: '8%', title: '金额', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | { |
| | | field: 'je', |
| | | width: '12%', |
| | | title: '不含税金额', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | {field: '6', width: '8%', title: '税率', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'sl', width: '8%', title: '库存', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'yl', width: '10%', title: '周用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: 'yl', width: '10%', title: '月用量', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | { |
| | | field: 'cgzt', |
| | | width: '10%', |
| | | title: '单据状态', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | { |
| | | field: 'xsdh', |
| | | width: '10%', |
| | | title: '销售单号', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | { |
| | | field: 'rq', |
| | | width: '10%', |
| | | title: '制单日期', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | {field: '6', width: '10%', title: '制单人', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: '6', width: '10%',title: '采购部门', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: '6', width: '10%',title: '采购组织', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, |
| | | {field: '6', width: '10%',title: '备注', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true} |
| | | { |
| | | field: '6', |
| | | width: '10%', |
| | | title: '采购部门', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | { |
| | | field: '6', |
| | | width: '10%', |
| | | title: '采购组织', |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | sortable: true |
| | | }, |
| | | {field: '6', width: '10%', title: '备注', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true} |
| | | ],//表头参数 |
| | | toolbarConfig: { |
| | | buttons: [{type:'text'},{ |
| | | 'name': '退货记录', |
| | | buttons: [{type: 'text'}, { |
| | | 'name': '退货记录', |
| | | |
| | | 'code':'Log' |
| | | }, |
| | | 'code': 'Log' |
| | | }, |
| | | { |
| | | 'name': '确认退货', |
| | | status:'primary', |
| | | 'code':'Sure' |
| | | status: 'primary', |
| | | 'code': 'Sure' |
| | | }], |
| | | import: false, |
| | | export: true, |
| | |
| | | |
| | | |
| | | //详情框 部分2 |
| | | const showCGDH =ref(); |
| | | const showDetails =ref(false); |
| | | let detailData =[]; |
| | | const showCGDH = ref(); |
| | | const showDetails = ref(false); |
| | | let detailData = []; |
| | | const cellClickEvent = ({row}) => { |
| | | detailData = ['cgdh', 'thdh', 'h', 'xh', 'wlbh', 'wlmc', 'gys','w','g','dw','cgzt','rq','yl','sl','xsdh','je','6'].map(field => { |
| | | return { label: ModelColumnContent(field) , value: row[field] } |
| | | if (isQueryColumnId === false) { |
| | | queryColumnId(); |
| | | } |
| | | |
| | | detailData = list.map(field => { |
| | | return {label: queryColumnsTitle(field), value: row[field]} |
| | | }) |
| | | showDetails.value = true; |
| | | showCGDH.value = row['cgdh']; |
| | | } |
| | | |
| | | const ModelColumnContent = (text) => { |
| | | switch (text) { |
| | | case 'cgdh': |
| | | return "采购单号"; |
| | | case 'thdh': |
| | | return "退货单号"; |
| | | case 'h': |
| | | return "厚"; |
| | | case 'xh': |
| | | return "型号"; |
| | | case 'wlbh': |
| | | return "物料编码"; |
| | | case 'wlmc': |
| | | return "物料名称"; |
| | | case 'gys': |
| | | return "供应商"; |
| | | case 'w': |
| | | return "宽"; |
| | | case 'g': |
| | | return "高"; |
| | | case 'dw': |
| | | return "单位"; |
| | | case 'cgzt': |
| | | return "采购状态"; |
| | | case 'rq': |
| | | return "日期"; |
| | | case 'yl': |
| | | return "余量"; |
| | | case 'sl': |
| | | return "数量"; |
| | | case 'xsdh': |
| | | return "销售单号"; |
| | | case 'je': |
| | | return "金额"; |
| | | case '6': |
| | | return "其他"; |
| | | //获取表列 |
| | | let list = []; |
| | | let columnIndex = 4;//列标头从第几列开始的 |
| | | let isQueryColumnId = false; |
| | | const queryColumnId = () => { |
| | | |
| | | default: |
| | | return text; |
| | | |
| | | while (columnIndex < gridOptions.columns.length) { |
| | | list.push(gridOptions.columns[columnIndex].field); |
| | | columnIndex++; |
| | | } |
| | | |
| | | isQueryColumnId = true; |
| | | return list; |
| | | } |
| | | |
| | | const SureReturn=()=>{ |
| | | //获取表列名 |
| | | function queryColumnsTitle(cn) { |
| | | let i = 0; |
| | | while (i < gridOptions.columns.length + 1) { |
| | | if (gridOptions.columns[i].field === cn) { |
| | | return gridOptions.columns[i].title; |
| | | } |
| | | i++; |
| | | } |
| | | } |
| | | |
| | | const type = VXETable.modal.confirm('是否确认退货?'); |
| | | // 详情框部分2 结束 |
| | | |
| | | const SureReturn = () => { |
| | | |
| | | MessageConfirmShow('退货', '是否确认退货?') |
| | | |
| | | } |
| | | |
| | | //详情框 部分2 结束 |
| | |
| | | }, |
| | | ] |
| | | |
| | | |
| | | //页面逻辑代码执行 |
| | | function logicExecute(type) { |
| | | const $grid = xGrid.value |
| | | switch (type) { |
| | | case '确定': |
| | | //多选退货逻辑代码TODO |
| | | MessageShow('操作成功!', 'success'); |
| | | break; |
| | | case '退货': |
| | | //单退货逻辑代码TODO |
| | | MessageShow('操作成功!', 'success'); |
| | | break; |
| | | default: |
| | | MessageShow('未知操作!', 'error'); |
| | | break; |
| | | } |
| | | return true; |
| | | } |
| | | |
| | | |
| | | //提示信息 |
| | | //信息内容,显示方式,显示标题,类型 |
| | | const MessageShow = (content, type = 'success') => { |
| | | ElMessage({ |
| | | message: content, |
| | | type: type, |
| | | showClose: true, |
| | | }) |
| | | } |
| | | |
| | | //操作确认类信息:操作类型,提示内容,提示标头,提示类型 |
| | | const MessageConfirmShow = (czType, content, title = '操作确认提示', type = 'warning') => { |
| | | ElMessageBox.confirm( |
| | | content, |
| | | title, |
| | | { |
| | | cancelButtonText: '取消', |
| | | confirmButtonText: '确定', |
| | | type: type, |
| | | center: true, |
| | | } |
| | | ) |
| | | //点击了确定 |
| | | .then(() => { |
| | | |
| | | logicExecute(czType); |
| | | |
| | | return true; |
| | | }) |
| | | //点击了取消 |
| | | .catch(() => { |
| | | return false; |
| | | }) |
| | | } |
| | | |
| | | //弹窗信息 |
| | | const MessageAlertShow = (content, title, type = 'info') => { |
| | | |
| | | ElMessageBox.alert(content, title, { |
| | | // 禁止自动对焦 |
| | | //autofocus: false, |
| | | confirmButtonText: 'OK', |
| | | /*callback: (action: Action) => { |
| | | MessageShow(`action: ${action}`,type) |
| | | },*/ |
| | | }) |
| | | } |
| | | |
| | | </script> |
| | | |
| | | |
| | | <style scoped> |
| | | :deep(.v-column-label div span){ |
| | | :deep(.v-column-label div span) { |
| | | font-weight: bold; |
| | | font-align:center; |
| | | } |
| | | </style> |