297 lines
9.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
功能功能描述 物料信息
作者Libra
邮箱mingxichen@163.com
时间2024年04月08日 15:46:01
版本v1.0
修改记录
修改内容
修改人员
修改时间
-->
<template>
<div class="vue-element-page-wrap" ref="tableContainer">
<el-row class="page-search" justify="space-between" align="middle">
<el-form ref="queryFormRef" :model="state.queryParams.params" :inline="true" @submit.native.prevent>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="物料编号" prop="MATERIALSPECNAME">
<el-Input v-model="state.queryParams.params.MATERIALSPECNAME" placeholder="物料编号"
v-on:keyup.enter="queryInfo" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="物料名称" prop="MATERIALSPECNAME">
<el-Input v-model="state.queryParams.params.DESC_CN" placeholder="物料名称" v-on:keyup.enter="queryInfo" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="恒温恒湿管控" prop="MATERIALSPECNAME">
<el-select v-model="state.queryParams.params.IS_CON_TEMP" placeholder="恒温恒湿管控" style="width: 240px"
default-first-option>
<el-option v-for="item in state.TEMPList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="page-search-btns">
<el-button type="primary" @click="queryInfo" :disabled="state.disableds" v-loading="state.loadings">搜索</el-button>
</div>
</el-row>
<div class="vue-element-page-table">
<div class="page-table-operate">
<div class="page-table-title">
<div class="page-table-title-left">
<span>物料信息列表</span>
</div>
</div>
<div class="page-table-operateBtns">
<el-popover :persistent="false" placement="right" popper-class="config-table-wrap" trigger="click">
<template #reference>
<el-button class="operateBtns-setting">
<svg-icon icon-class="table_title" width="25px" height="16px" />
</el-button>
</template>
<ConfigTable :list="materialTableConfig.column" @updateList="updateList" />
</el-popover>
</div>
</div>
<el-table
border
v-loading="materialTableConfig.loading"
:data="state.MaterialList"
highlight-current-row
:height="tableHeight"
row-key="id"
:table-layout="'auto'">
<template v-for="(col, index) in materialTableConfig.column" :key="index">
<el-table-column
v-if="!col.hide"
:label="col.header"
:prop="col.field"
align="center">
<template #default="scope">
<span>{{ scope.row[col.field] }}</span>
<!-- 或者直接使用 {{ scope.row[col.prop] }} 如果 col.prop 存在且您想用它 -->
</template>
</el-table-column>
</template>
</el-table>
<pagination v-if="state.total > 0" :total="state.total" v-model:pageNumTo="state.queryParams.pageNum"
v-model:pageSizeTo="state.queryParams.pageSize" @pagination="handleQuery" />
</div>
</div>
</template>
<script lang="ts">
export default {
name: "materialInfo",
};
</script>
<script lang="ts" setup>
import { reactive, ref, onMounted, onUnmounted, toRefs, getCurrentInstance, nextTick } from "vue";
import { ElForm, ElMessageBox, ElTable } from "element-plus";
import { getQueryList, getQueryPageList, BpelEvent } from '@/api/common';
import { bTableHeight } from "../../../../composables/calcTableHeight";
const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(180);
const queryFormRef = ref(ElForm);
const formDataRef = ref(ElForm);
const formDataRefData = ref({
SITENAME: '',//工厂
TEMPList: [{ label: '是', value: 'Y' }, { label: '否', value: 'N' }] as any,
SITENAMElIST: [{ label: 'A', value: 'a' }],//工厂列表
MATERIALSPECNAME: '',//物料编号
MATERIALSPECDESCRIPTION: '',//物料描述
CHECKSTATE: '',//check state
CHECKSTATELIST: [{ label: 'A', value: 'a' }],//check state列表
ERPLOCATION: '',//ERP库位
MATERIALTYPE: '',//物料类型
MATERIALLIFEMARK: '',//寿命管理标记
MATERIALGROUP: '',//物料组
DESC_CN: '',//中文描述
DESC_EN: '',//英文描述
EXPIRINGDATE: '',//过期时间
STOCKDATE: '',//入库有效期
MATERIALGROUPDESCRIPTION: '',//物料组描述
MATERIALUNIT: '',//单位
MATERIALWEIGHT: '',//物料重量
ERPFACTORY: '',//ERP工厂
MATERIALSPECTYPE: '',//物料类别
})
/***---------------------------------------------------------------------------
* -------------------------------------页面SQL语句配置------------------------------------------ */
const state = reactive({
loadings : false,
disableds : false,
rsa: '',
DBProcessType: 'save',
queryParams: {
queryId: 'GetMaterialSpecList',
version: '10004',
params: {
MATERIALSPECNAME: '',
SITENAME: 'SDK',
DESC_CN: '',
IS_CON_TEMP: '',
},
pageNum: 1,
pageSize: 20
},
ChangeParams: {
header: {
MESSAGENAME: '',
LANGUAGE: 'Chinese',
},
body: {
INRATIO: '',
OUTRATIO: '',
IS_CON_TEMP: '',
DESCRIPTION: '',
MATERIALSPECNAME: '',
SITENAME: 'SDK',
MATERIALSPECDESCRIPTION: '',
CHECKSTATE: '',
MATERIALSPECTYPE: '',
MAKEDATE: '',
MAKEUSER: '',
DESC_CN: '',
DESC_EN: '',
MATERIALTYPE: '',
MATERIALGROUP: '',
MATERIALGROUPDESCRIPTION: '',
MATERIALUNIT: '',
MATERIALWEIGHT: '',
ERPFACTORY: '',
ERPLOCATION: '',
MATERIALLIFEMARK: '',
EXPIRINGDATE: '',
STOCKDATE: '',
}
},
total: 0,
loading: false,
MaterialList: [] as any,
dialog: {
title: '新增用户',
visible: false
},
TEMPList: [{ label: '全部', value: '' },{ label: '是', value: '01' }, { label: '否', value: '02' }] as any,
formData: {
total: 0,
SUPPLIERNO: '',
SUPPLIERNAME: '',
NATIONALNO: '',
DESCRIPTION: '',
ADDRESS: '',
POSTCODE: '',
CITY: '',
TEL: '',
FAX: '',
INCHARGE: '',
EMAIL: '',
LASTEVENTTIME: '',
} as any,
column: [] as any,
selectItem: undefined as any,
currentTime: '',
allRole: [] as any
})
const materialTableConfig = ref({
loading: false,
column: [] as any,
data: [],
})
/***---------------------------------------------------------------------------
* -------------------------------------钩子函数区域------------------------------------------ */
onMounted(() => {
materialTableConfig.value.column = [
{ header: "物料编号", field: "MATERIALSPECNAME", hide: false },
{ header: "品名", field: "DESC_CN", hide: false },
{ header: "规格型号", field: "DESCRIPTION", hide: false },
{ header: "物料类型", field: "MATERIALTYPE", hide: false },
{ header: "恒温管控", field: "IS_CON_TEMP", hide: false },
{ header: "是否熟化", field: "MATURATIONFLAG", hide: false },
{ header: "烘烤天数", field: "MATURATIONTIME", hide: false },
{ header: "主单位", field: "MATERIALUNIT", hide: false },
{ header: "辅单位", field: "FUNIT", hide: false },
{ header: "换算率", field: "UNIT_RATES", hide: false },
{ header: "有效期规则", field: "REPLACED_VALUE", hide: false },
{ header: "启用批次", field: "IS_BATCH", hide: false },
{ header: "质检", field: "IQCFLAG", hide: false },
{ header: "检验周期", field: "INSPECTION_CYCLE", hide: false }
]
// 初始化时调用 handleQuery
handleQuery();
updateTableHeight();
window.addEventListener('resize', handleResize);
});
const queryInfo = () => {
state.queryParams.pageNum = 1
handleQuery()
}
const handleQuery = () => {
state.MaterialList = []
state.loadings = true;
state.disableds = true;
console.log(state.queryParams)
getQueryPageList(state.queryParams)
.then((res: any) => {
console.log(res.data);
if(res.data.list.length != 0){
state.MaterialList = res.data.list;
console.log(state.MaterialList)
state.total = res.data.total;
state.loadings = false;
state.disableds = false;
} else {
ElMessageBox.alert('查无此数据', '提醒框', {
confirmButtonText: 'OK',
})
state.loadings = false;
state.disableds = false;
}
})
.catch(() => { });
}
const updateList = (col: any) => {
materialTableConfig.value.column = col
}
const buildInfo = () => { state.DBProcessType = 'Insert' }
const editInfo = () => { state.DBProcessType = 'Update' }
/* 功能:保存创建修改信息
参数ChangeParams
时间::2024-4-24
作者:李文虎
*/
const saveInfo = () => {
if (state.DBProcessType == 'Insert') {
state.ChangeParams.header.MESSAGENAME = 'CreateMaterialSpec'
} else if (state.DBProcessType == 'Update') {
state.ChangeParams.header.MESSAGENAME = 'ModifyMaterialSpec'
}
BpelEvent(state.ChangeParams).then((res: any) => {
})
.catch(() => { });
}
const exiteInfo = () => {
formDataRef.value.resetFields()
}
</script>
<style scoped>
el-table /deep/ el-table-comlun {
align: center !important; /* 这将影响所有单元格 */
}
</style>