| | |
| | | <script setup> |
| | | |
| | | import {reactive} from "vue"; |
| | | import {useRouter} from 'vue-router' |
| | | let router=useRouter() |
| | | import request from "@/utils/request" |
| | | import deepClone from "@/utils/deepClone" |
| | | import {ElMessage} from "element-plus" |
| | | import {computed, onMounted, reactive, ref} from "vue" |
| | | import {useRoute, useRouter} from "vue-router" |
| | | import {changeFilterEvent,filterChanged} from "@/hook" |
| | | |
| | | const router = useRouter() |
| | | const route = useRoute() |
| | | let produceList = ref([]) |
| | | const getTableRow = (row,type) =>{ |
| | | switch (type) { |
| | | case 'edit' :{ |
| | | //alert('我接收到子组件传送的编辑信息') |
| | | router.push({path: '/main/ingredients/CreateIngredients', query: { id: row.id }}) |
| | | break |
| | | return |
| | | } |
| | | case 'delete':{ |
| | | alert('我接收到子组件传送的删除信息') |
| | | break |
| | | let flowData = ref({ |
| | | id: row.id |
| | | }) |
| | | request.post("/Material/deleteMaterialStore",flowData.value).then((res) => { |
| | | if(res.code==200){ |
| | | ElMessage.success("删除成功") |
| | | router.push({path:'/main/ingredients/SelectIngredients',query:{random:Math.random()}}) |
| | | }else{ |
| | | ElMessage.warning(res.msg) |
| | | router.push("/login") |
| | | } |
| | | }) |
| | | return |
| | | } |
| | | } |
| | | } |
| | | |
| | | const value = ref('') |
| | | const options = [ |
| | | { |
| | | value: '原片', |
| | | label: '原片' |
| | | }, |
| | | { |
| | | value: '辅料', |
| | | label: '辅料', |
| | | } |
| | | ] |
| | | |
| | | const hasDecimal=(value)=>{ |
| | | const regex=/\./ // 定义正则表达式,查找小数点 |
| | | return regex.test(value) //返回true/false |
| | | } |
| | | |
| | | const hasDecimalhtml=(item,row)=>{ |
| | | let aa=item.split('.').length |
| | | if (aa===2){ |
| | | return row[item.split('.')[0]][item.split('.')[1]] |
| | | }else if(aa===3){ |
| | | return row[item.split('.')[0]][item.split('.')[1]][item.split('.')[2]] |
| | | } |
| | | |
| | | |
| | | } |
| | | |
| | | let pageNum=ref(1) |
| | | let total = reactive({ |
| | | pageTotal : 0, |
| | | dataTotal : 0, |
| | | pageSize : 2 |
| | | }) |
| | | |
| | | let filterData = ref({ |
| | | type:'' |
| | | |
| | | }) |
| | | let BasicData = ref([]) |
| | | |
| | | let materialStore= ref([]) |
| | | |
| | | let arr = [ |
| | | {type:'expand',fixed:'left',slots: { content:'content' },width: '50'}, |
| | | {title: '操作', width: '110', slots: { default: 'button_slot' },fixed:'left'}, |
| | | { type: 'seq',fixed:'left', title: '自序', width: '80' }, |
| | | {field: 'id', width: '150',title: '物料编码', sortable: true,showOverflow:'ellipsis' ,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged} |
| | | ] |
| | | |
| | | /*//第一次加载默认 |
| | | value.value='原片' |
| | | filterData.value.type='原片' |
| | | request.get(`/BasicWarehouse/BasicWarehouseType/${value.value}`).then((res) => { |
| | | if(res.code==200){ |
| | | gridOptions.columns.splice(0,gridOptions.columns.length) |
| | | console.log(res.data) |
| | | BasicData.value = res.data |
| | | //添加列 |
| | | gridOptions.columns=arr |
| | | |
| | | for (let i=0;i<BasicData.value.length;i++){ |
| | | let aa={field: BasicData.value[i].OperateType, width: '150',title: BasicData.value[i].OperateTypeName, sortable: true,showOverflow:'ellipsis' ,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged} |
| | | console.log(gridOptions.columns) |
| | | gridOptions.columns.push(aa) |
| | | |
| | | } |
| | | getWorks() |
| | | |
| | | }else{ |
| | | ElMessage.warning(res.msg) |
| | | } |
| | | })*/ |
| | | |
| | | |
| | | //列查询 |
| | | const getWork = () => { |
| | | filterData.value.type=value.value |
| | | request.get(`/BasicWarehouse/BasicWarehouseType/${value.value}`).then((res) => { |
| | | if(res.code==200){ |
| | | gridOptions.columns=[] |
| | | BasicData.value = res.data |
| | | //添加列 |
| | | gridOptions.columns=arr.slice() |
| | | |
| | | for (let i=0;i<BasicData.value.length;i++){ |
| | | let column={field: BasicData.value[i].OperateType, |
| | | width: '150',title: BasicData.value[i].OperateTypeName, |
| | | sortable: true,showOverflow:'ellipsis' , |
| | | filters:[{ data: '' }], |
| | | slots: { filter: 'num1_filter' }, |
| | | filterMethod:filterChanged} |
| | | |
| | | gridOptions.columns.push(column) |
| | | |
| | | } |
| | | getWorks() |
| | | |
| | | }else{ |
| | | ElMessage.warning(res.msg) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | |
| | | //数据绑定 |
| | | const getWorks = () => { |
| | | console.log(filterData.value) |
| | | request.post(`/Material/getSelectMaterialStore/1/${total.pageSize}`,filterData.value).then((res) => { |
| | | |
| | | if(res.code==200){ |
| | | console.log(res.data.data) |
| | | materialStore.value=[] |
| | | for (let i=0;i<res.data.data.length;i++){ |
| | | materialStore.value[i]= JSON.parse(res.data.data[i].json) |
| | | materialStore.value[i].id= res.data.data[i].id |
| | | } |
| | | console.log(materialStore) |
| | | |
| | | total.dataTotal = res.data.total.total*1 |
| | | total.pageTotal= res.data.total.pageTotal |
| | | pageNum.value=1 |
| | | |
| | | produceList = deepClone(materialStore.value) |
| | | xGrid.value.loadData(produceList) |
| | | gridOptions.loading=false |
| | | }else{ |
| | | ElMessage.warning(res.msg) |
| | | router.push("/login") |
| | | } |
| | | }) |
| | | } |
| | | |
| | | //分页查询 |
| | | const getWorkPaging = () => { |
| | | console.log(filterData.value) |
| | | request.post(`/Material/getSelectMaterialStore/${pageNum.value}/${total.pageSize}`,filterData.value).then((res) => { |
| | | |
| | | if(res.code==200){ |
| | | console.log(res.data.data) |
| | | materialStore.value=[] |
| | | for (let i=0;i<res.data.data.length;i++){ |
| | | materialStore.value[i]= JSON.parse(res.data.data[i].json) |
| | | materialStore.value[i].id= res.data.data[i].id |
| | | } |
| | | |
| | | produceList = deepClone(materialStore.value) |
| | | xGrid.value.loadData(produceList) |
| | | gridOptions.loading=false |
| | | }else{ |
| | | ElMessage.warning(res.msg) |
| | | router.push("/login") |
| | | } |
| | | }) |
| | | } |
| | | |
| | | //分页查询 |
| | | const selectOrderList = ()=>{ |
| | | filterData.value.type=value.value |
| | | request.get(`/BasicWarehouse/BasicWarehouseType/${value.value}`).then((res) => { |
| | | if(res.code==200){ |
| | | gridOptions.columns.splice(0,gridOptions.columns.length) |
| | | console.log(res.data) |
| | | BasicData.value = res.data |
| | | //添加列 |
| | | gridOptions.columns=arr |
| | | |
| | | for (let i=0;i<BasicData.value.length;i++){ |
| | | let aa={field: BasicData.value[i].OperateType, width: '150',title: BasicData.value[i].OperateTypeName, sortable: true,showOverflow:'ellipsis' ,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged} |
| | | console.log(gridOptions.columns) |
| | | gridOptions.columns.push(aa) |
| | | |
| | | } |
| | | getWorkPaging() |
| | | |
| | | }else{ |
| | | ElMessage.warning(res.msg) |
| | | } |
| | | }) |
| | | } |
| | | //页脚跳转 |
| | | const handlePageChange = ({ currentPage, pageSize }) => { |
| | | total.pageTotal = pageSize |
| | | pageNum.value=currentPage |
| | | |
| | | selectOrderList(); |
| | | } |
| | | |
| | | |
| | | |
| | | //子组件接收参数 |
| | | |
| | | const xGrid = ref() |
| | | const gridOptions = reactive({ |
| | | border: "full",//表格加边框 |
| | | keepSource: true,//保持源数据 |
| | |
| | | useKey: true |
| | | }, |
| | | filterConfig: { //筛选配置项 |
| | | remote: true |
| | | //remote: true |
| | | }, |
| | | customConfig: { |
| | | storage: true |
| | |
| | | showStatus: true |
| | | },//表头参数 |
| | | columns:[ |
| | | {type:'expand',fixed:"left",slots: { content:'content' },width: '50'}, |
| | | // { type: 'checkbox',fixed:"left", title: '选择', width: '80' }, |
| | | {title: '操作', width: '110', slots: { default: 'button_slot' },fixed:"left"}, |
| | | { type: 'seq',fixed:"left", title: '自序', width: '80' }, |
| | | {field: 'materialCode', width:'150', title: '物料编码', sortable: true,editRender: { name: 'input', attrs: { placeholder: '' } } }, |
| | | {field: 'materialName', width: '150',title: '物料名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }}, |
| | | {field: 'origin', width: '120',title: '产地', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }}, |
| | | {field: 'width', width: '100',title: '宽度', sortable: true}, |
| | | {field: 'height',width: '100', title: '高度', sortable: true,showOverflow:"ellipsis"}, |
| | | {field: 'thickness', width: '80',title: '厚度', sortable: true}, |
| | | {field: 'model',width: '100', title: '型号', sortable: true}, |
| | | {field: 'conversionRate', width: '100',title: '换算率', sortable: true}, |
| | | {field: 'unit',width: '100', title: '单位', sortable: true}, |
| | | {field: 'conversionUnit', width: '80',title: '换算单位', sortable: true}, |
| | | {field: 'shelfLife',width: '100', title: '保质期', sortable: true}, |
| | | {field: 'weight', width: '100',title: ' 重量', sortable: true}, |
| | | {field: 'quantity',width: '110', title: '数量', sortable: true}, |
| | | {field: 'inventoryOrganization',width: '100', title: '库存组织', sortable: true}, |
| | | {field: 'remark',width: '80', title: '备注', sortable: true}, |
| | | |
| | | |
| | | |
| | | |
| | | ],//表头按钮 |
| | | toolbarConfig: { |
| | |
| | | zoom: true, |
| | | custom: true |
| | | }, |
| | | data: [ |
| | | { |
| | | "materialCode": 700900000000941, |
| | | "materialName": "丝袜防晒手套套袖", |
| | | "origin": "00", |
| | | "width": "00", |
| | | "height": "00", |
| | | "thickness":'00', |
| | | "model": "服饰", |
| | | "conversionRate": "1000", |
| | | "unit": "双", |
| | | "conversionUnit": "1", |
| | | "shelfLife": "12个月", |
| | | "weight": "0.0000", |
| | | "quantity": "10000", |
| | | "inventoryOrganization": "人工库", |
| | | "remark": "测试", |
| | | }, |
| | | { |
| | | "materialCode": 700900000000941, |
| | | "materialName": "丝袜防晒手套套袖", |
| | | "origin": "00", |
| | | "width": "00", |
| | | "height": "00", |
| | | "thickness":'00', |
| | | "model": "服饰", |
| | | "conversionRate": "1000", |
| | | "unit": "双", |
| | | "conversionUnit": "1", |
| | | "shelfLife": "12个月", |
| | | "weight": "0.0000", |
| | | "quantity": "10000", |
| | | "inventoryOrganization": "人工库", |
| | | "remark": "测试", |
| | | }, |
| | | ],//table body实际数据 |
| | | footerMethod ({ columns, data }) {//页脚函数 |
| | | return[ |
| | | columns.map((column, columnIndex) => { |
| | | if (columnIndex === 0) { |
| | | return '合计:' |
| | | } |
| | | // if (props.tableProp.footList.includes(column.field)) { |
| | | // return sumNum(data, column.field) |
| | | // } |
| | | |
| | | return '' |
| | | }) |
| | | ] |
| | |
| | | </script> |
| | | |
| | | <template> |
| | | |
| | | |
| | | <div class="main-div-customer"> |
| | | <div> |
| | | <el-row> |
| | | <el-col :span="4"> |
| | | <el-select v-model="value" placeholder="请选择类别" @change="getWork"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | |
| | | |
| | | <vxe-grid |
| | | max-height="100%" |
| | | @filter-change="filterChanged" |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | |
| | | > |
| | | <!-- @toolbar-button-click="toolbarButtonClickEvent"--> |
| | | <!-- 下拉显示所有信息插槽--> |
| | | <template #content="{ row }"> |
| | | <ul class="expand-wrapper"> |
| | | <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> |
| | | <span v-if="hasDecimal(item.field)">{{ hasDecimalhtml(item.field,row) }}</span> |
| | | <span v-else>{{ row[item.field] }}</span> |
| | | </li> |
| | | </ul> |
| | | </template> |
| | |
| | | </div> |
| | | </template> |
| | | |
| | | <template #pager> |
| | | <!--使用 pager 插槽--> |
| | | <vxe-pager |
| | | @page-change="handlePageChange" |
| | | :layouts="[ 'PrevPage', 'Jump','PageCount', 'NextPage', 'Total']" |
| | | v-model:current-page="pageNum" |
| | | v-model:page-size="total.pageSize" |
| | | v-model:pager-count="total.pageTotal" |
| | | :total="total.dataTotal" |
| | | > |
| | | </vxe-pager> |
| | | </template> |
| | | |
| | | |
| | | </vxe-grid> |
| | | </div> |