| | |
| | | <script setup> |
| | | import {reactive, ref} from "vue"; |
| | | import {useI18n} from "vue-i18n"; |
| | | import deepClone from "@/utils/deepClone" |
| | | import {Search} from "@element-plus/icons-vue"; |
| | | import request from "@/utils/request"; |
| | | import {ElDatePicker, ElMessage} from "element-plus"; |
| | | import useOrderInfoStore from "@/stores/sd/order/orderInfo"; |
| | | import request from "@/utils/request"; |
| | | import useUserInfoStore from "@/stores/userInfo"; |
| | | import userInfo from "@/stores/userInfo"; |
| | | |
| | | const { t } = useI18n() |
| | | const {t} = useI18n() |
| | | const userStore = useUserInfoStore() |
| | | const user = userInfo() |
| | | const orderInfo = useOrderInfoStore() |
| | | |
| | | const xGrid = ref() |
| | | const gridOptions = reactive({ |
| | | height:'100%', |
| | | height: '100%', |
| | | loading: false, |
| | | border: "full",//表格加边框 |
| | | border: "full",//表格加边框 |
| | | keepSource: true,//保持源数据 |
| | | align: 'center',//文字居中 |
| | | stripe:true,//斑马纹 |
| | | rowConfig: {isCurrent: true, isHover: true,height: 30, useKey: true},//鼠标移动或选择高亮 |
| | | stripe: true,//斑马纹 |
| | | rowConfig: {isCurrent: true, isHover: true, height: 30, useKey: true},//鼠标移动或选择高亮 |
| | | id: 'ProjectMange', |
| | | scrollX:{enabled: true}, |
| | | scrollY:{ enabled: true ,gt:0},//开启虚拟滚动 |
| | | showOverflow:true, |
| | | scrollX: {enabled: true}, |
| | | scrollY: {enabled: true, gt: 0},//开启虚拟滚动 |
| | | showOverflow: true, |
| | | columnConfig: { |
| | | resizable: true, |
| | | useKey: true |
| | |
| | | mode: 'row', |
| | | showStatus: true |
| | | }, |
| | | /*formConfig: { |
| | | data: { |
| | | width: '', |
| | | height: '', |
| | | quantity: '' |
| | | }, |
| | | items: [ |
| | | { field: 'width', title: t('order.width')+':', itemRender: { name: 'VxeInput' } }, |
| | | { field: 'height', title: t('order.height')+':', itemRender: { name: 'VxeInput' } }, |
| | | { field: 'quantity', title: t('order.quantity')+':', itemRender: { name: 'VxeInput' } }, |
| | | { |
| | | itemRender: { |
| | | name: 'VxeButtonGroup', |
| | | options: [ |
| | | { type: 'submit', content: t('craft.sure'), status: 'primary' }, |
| | | { type: 'reset', content: t('product.msg.reset') } |
| | | ] |
| | | } |
| | | } |
| | | ] |
| | | },*/ |
| | | columns:[ |
| | | {type:'expand',fixed:"left",slots: { content:'content' },width: 50}, |
| | | {field: 'id', width: 100,title: '工程号',}, |
| | | {field: '',width: 50,title: '名称',}, |
| | | {field: 'id', width: 50,title: '膜系',}, |
| | | {field: 'id', width: 50,title: '厚度',}, |
| | | {field: 'id', width: 50,title: '类型',}, |
| | | {field: 'id', width: 50,title: '状态',}, |
| | | {field: 'id', width: 50,title: '数量',}, |
| | | {field: 'id', width: 50,title: '面积',}, |
| | | {field: 'id', width: 100,title: '流程卡数量',}, |
| | | {field: 'id', width: 100,title: '原片使用数',}, |
| | | {field: 'id', width: 70,title: '流程卡',}, |
| | | {field: 'id', width: 100,title: '钢化装载率',}, |
| | | {field: '',width: 100,title: '钢化炉数',}, |
| | | {field: '',width: 100,title: '平均切裁率',}, |
| | | {field: '',width: 100,title: '有效切裁率',}, |
| | | {field: '',width: 100,title: '尾片切裁率',}, |
| | | {field: '',width: 100,title: '原料使用数',}, |
| | | {field: '',width: 100,title: '平均切裁率',}, |
| | | {field: '',width: 50,title: '备注',}, |
| | | {field: '',width: 100,title: '创建人',}, |
| | | {field: '',width: 100,title: '创建时间',}, |
| | | {field: '',width: 100,title: '修改时间',}, |
| | | |
| | | columns: [ |
| | | {type: 'expand', fixed: "left", slots: {content: 'content'}, width: 50}, |
| | | {field: 'projectNumber', width: 100, title: '工程号', filters: [{data: ''}], slots: {filter: 'num1_filter'},}, |
| | | {field: 'projectName', width: 50, title: '名称',}, |
| | | {field: 'glassType', width: 50, title: '膜系',}, |
| | | {field: 'thickness', width: 50, title: '厚度',}, |
| | | {field: 'type', width: 50, title: '类型',}, |
| | | {field: 'state', width: 50, title: '状态',}, |
| | | {field: 'quantity', width: 50, title: '数量',}, |
| | | {field: 'area', width: 50, title: '面积',}, |
| | | {field: 'processCardQuantity', width: 100, title: '流程卡数量',}, |
| | | {field: 'usingQuantity', width: 100, title: '原片使用数',}, |
| | | {field: 'processCardCollection', width: 70, title: '流程卡',}, |
| | | {field: 'temperedLoadingRate', width: 100, title: '钢化装载率',}, |
| | | {field: 'numberOfTemperingFurnaces', width: 100, title: '钢化炉数',}, |
| | | {field: 'averageCuttingRate', width: 100, title: '平均切裁率',}, |
| | | {field: 'effectiveCuttingRate', width: 100, title: '有效切裁率',}, |
| | | {field: 'residueGlassCuttingRate', width: 100, title: '尾片切裁率',}, |
| | | {field: 'amountOfOriginalGlassUsage1', width: 100, title: '原料使用数',}, |
| | | {field: 'averageCuttingRate1', width: 100, title: '平均切裁率',}, |
| | | {field: 'notes', width: 50, title: '备注',}, |
| | | {field: 'creator', width: 100, title: '创建人',}, |
| | | {field: 'createTime', width: 100, title: '创建时间',}, |
| | | {field: 'modifyTime', width: 100, title: '修改时间',}, |
| | | ],//表头参数 |
| | | data:null,//表格数据 |
| | | data: null,//表格数据 |
| | | toolbarConfig: { |
| | | buttons: [], |
| | | slots:{ |
| | | slots: { |
| | | buttons: "toolbar_buttons" |
| | | }, |
| | | }, |
| | | |
| | | }) |
| | | const oderInfo = useOrderInfoStore() |
| | | |
| | | |
| | | //定义工程状态 |
| | | const optionVal = ref('0') |
| | | const optionVal = ref('') |
| | | const options = [ |
| | | { |
| | | value: '0', |
| | |
| | | }, |
| | | ] |
| | | |
| | | //点击查询 |
| | | const getWorkOrder = () => { |
| | | let startTime = orderInfo.workOrderDate[0] |
| | | let endTime = orderInfo.workOrderDate[1] |
| | | request.post(`/processCard/flowCard/${pageNum.value}/${total.pageSize}/${startTime}/${endTime}`, filterData.value).then((res) => { |
| | | //公共函数 |
| | | function buildRequestParams() { |
| | | let startSelectTime = orderInfo.workOrderDate[0]; |
| | | let endSelectTime = orderInfo.workOrderDate[1]; |
| | | |
| | | const params = { |
| | | startSelectTime, |
| | | endSelectTime, |
| | | }; |
| | | |
| | | return params; |
| | | } |
| | | |
| | | //筛选条件 |
| | | let filterData = ref({ |
| | | projectNumber: '', |
| | | }) |
| | | // 定义数据返回结果,使用ref创建响应式数据,初始化为空数组 |
| | | let produceList = ref([]) |
| | | |
| | | // 获取七天前到当前时间 |
| | | function getNowTime() { |
| | | const start = new Date(new Date().getTime() - 3600 * 1000 * 24 * 15) |
| | | .toISOString() |
| | | .replace('T', ' ') |
| | | .slice(0, 10) //默认开始时间7天前 |
| | | const end = new Date(new Date().getTime()) |
| | | .toISOString() |
| | | .replace('T', ' ') |
| | | .slice(0, 10)//默认结束时间当前时间 |
| | | return [start, end] |
| | | } |
| | | |
| | | // 初始化时间范围,若为空则设为近七天时间 |
| | | if (orderInfo.workOrderDate[0] === "" && orderInfo.workOrderDate[1] === "") { |
| | | orderInfo.workOrderDate = getNowTime(); |
| | | } |
| | | //获取选中时间 |
| | | let startSelectTime = orderInfo.workOrderDate[0] |
| | | let endSelectTime = orderInfo.workOrderDate[1] |
| | | // 首次加载数据 |
| | | request.post(`/glassOptimize/optimizeProjectMange/${startSelectTime}/${endSelectTime}`, filterData.value).then((res) => { |
| | | if (res.code == 200) { |
| | | produceList.value = produceList.value.concat(deepClone(res.data.data)) |
| | | xGrid.value.reloadData(produceList.value); |
| | | gridOptions.loading = false; |
| | | } else { |
| | | ElMessage.warning(res.msg); |
| | | } |
| | | }) |
| | | |
| | | /*使用筛选,后端获取数据*/ |
| | | const changeFilterEvent = (event, option, $panel,) => { |
| | | // 手动触发筛选 |
| | | $panel.changeOption(event, !!option.data, option) |
| | | } |
| | | |
| | | function filterChanged(column) { |
| | | gridOptions.loading = true; |
| | | //筛选条件发生变化条件发生变化 |
| | | let value = column.datas[0] != undefined ? column.datas[0] : '' |
| | | value = value.trim(); |
| | | //判断是否存在外键 |
| | | if (column.property.indexOf('.') > -1) { |
| | | const columnArr = column.property.split('.') |
| | | filterData.value[columnArr[0]] = { |
| | | [columnArr[1]]: value |
| | | } |
| | | } else { |
| | | filterData.value[column.property] = value |
| | | } |
| | | |
| | | const params = buildRequestParams(); |
| | | console.log('即将发送给后端的筛选参数:', filterData.value); |
| | | request.post(`/glassOptimize/optimizeProjectMange/${params.startSelectTime}/${params.endSelectTime}`, filterData.value).then((res) => { |
| | | console.log('已收到服务器响应,响应码:', res.code); |
| | | console.log('响应数据:', res.data); |
| | | if (res.code == 200) { |
| | | total.dataTotal = res.data.total.total * 1 |
| | | total.pageTotal = res.data.total.pageTotal |
| | | pageTotal.value = res.data.total |
| | | xGrid.value.loadData(res.data.data) |
| | | gridOptions.loading = false |
| | | produceList = deepClone(res.data.data) |
| | | xGrid.value.reloadData(produceList) |
| | | gridOptions.loading=false |
| | | } else { |
| | | ElMessage.warning(res.msg) |
| | | } |
| | | }) |
| | | }); |
| | | } |
| | | |
| | | // 点击查询按钮触发的函数,根据当前筛选条件获取数据并加载到表格 |
| | | const getWorkOrder = () => { |
| | | const params = buildRequestParams(); |
| | | request.post(`/glassOptimize/optimizeProjectMange/${params.startSelectTime}/${params.endSelectTime}`, filterData.value).then((res) => { |
| | | if (res.code == 200) { |
| | | produceList.value = deepClone(res.data.data); |
| | | gridOptions.data = produceList.value; |
| | | xGrid.value.reloadData(produceList.value); |
| | | gridOptions.loading = false; |
| | | } else { |
| | | ElMessage.warning(res.msg); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | | <div id="mange"> |
| | | <div id="select"> |
| | | <span>优化日期</span> |
| | | <el-date-picker |
| | | style="margin-left:10px; margin-top: -5px; " |
| | | v-model="oderInfo.mangeDate" |
| | | type="daterange" |
| | | format="YYYY/MM/DD" |
| | | value-format="YYYY-MM-DD" |
| | | :start-placeholder="$t('basicData.startDate')" |
| | | :end-placeholder="$t('basicData.endDate')" |
| | | :default-time="defaultTime" |
| | | <div id="mange"> |
| | | <div id="select"> |
| | | <span>优化日期</span> |
| | | <el-date-picker |
| | | style="margin-left:10px; margin-top: -5px; " |
| | | v-model="orderInfo.workOrderDate" |
| | | :default-time="defaultTime" |
| | | :start-placeholder="$t('basicData.startDate')" |
| | | :end-placeholder="$t('basicData.endDate')" |
| | | type="daterange" |
| | | format="YYYY/MM/DD" |
| | | value-format="YYYY-MM-DD" |
| | | /> |
| | | <!-- <vxe-input--> |
| | | <!-- style="margin-left:10px; "--> |
| | | <!-- placeholder="输入工程号或流程卡号"--> |
| | | <!-- >--> |
| | | <!-- </vxe-input>--> |
| | | |
| | | /> |
| | | <vxe-input |
| | | style="margin-left:10px; " |
| | | placeholder="输入工程号或流程卡号" |
| | | > |
| | | </vxe-input> |
| | | |
| | | <span class="input">工程状态</span> |
| | | <el-select |
| | | style="margin-left:10px; margin-top: -5px; width: 150px" |
| | | :default-first-option="true" |
| | | ref="getSelect" |
| | | v-model="optionVal" |
| | | clearable |
| | | class="m-2" |
| | | @change="getWorkOrder" |
| | | > |
| | | |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | <!--查询--> |
| | | <el-button |
| | | style="margin-left:10px;margin-top: -5px" |
| | | :icon="Search" |
| | | type="primary" |
| | | @click="getWorkOrder">{{ $t('basicData.search') }} |
| | | </el-button> |
| | | </div> |
| | | |
| | | <vxe-grid |
| | | @filter-change="filterChanged" |
| | | height="100%" |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | v-on="gridEvents" |
| | | <span class="input">工程状态</span> |
| | | <el-select |
| | | style="margin-left:10px; margin-top: -5px; width: 150px" |
| | | :default-first-option="true" |
| | | ref="getSelect" |
| | | v-model="optionVal" |
| | | clearable |
| | | class="m-2" |
| | | @change="getWorkOrder" |
| | | > |
| | | <template #num2_filter="{ column, $panel }"> |
| | | <div> |
| | | <div v-for="(option, index) in column.filters" :key="index"> |
| | | <vxe-select v-model="option.data" :placeholder="$t('processCard.pleaseSelect')" @change="changeFilterEvent($event, option, $panel)"> |
| | | <vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option> |
| | | <vxe-option value="1" :label="$t('basicData.selected')"></vxe-option> |
| | | </vxe-select> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <template #num1_filter="{ column, $panel }"> |
| | | <div> |
| | | <div v-for="(option, index) in column.filters" :key="index"> |
| | | <input |
| | | type="type" |
| | | v-model="option.data" |
| | | @keyup.enter.native="$panel.confirmFilter()" |
| | | @input="changeFilterEvent($event, option, $panel)"/> |
| | | </div> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | <!--查询--> |
| | | <el-button |
| | | style="margin-left:10px;margin-top: -5px" |
| | | :icon="Search" |
| | | type="primary" |
| | | @click="getWorkOrder">{{ $t('basicData.search') }} |
| | | </el-button> |
| | | </div> |
| | | |
| | | <vxe-grid |
| | | height="100%" |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | @filter-change="filterChanged" |
| | | > |
| | | <template #select_filter="{ column, $panel }"> |
| | | <div> |
| | | <div v-for="(option, index) in column.filters" :key="index"> |
| | | <vxe-select v-model="option.data" @change="changeFilterEvent($event, option, $panel)"> |
| | | <vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option> |
| | | <vxe-option value="1" :label="$t('basicData.selected')"></vxe-option> |
| | | </vxe-select> |
| | | </div> |
| | | </template> |
| | | </vxe-grid> |
| | | <div id="last"> |
| | | </div> |
| | | </template> |
| | | |
| | | <template #num1_filter="{ column, $panel }"> |
| | | <div> |
| | | <div v-for="(option, index) in column.filters" :key="index"> |
| | | <input v-model="option.data" type="text" |
| | | @keyup.enter.native="$panel.confirmFilter()" |
| | | @input="changeFilterEvent($event, option, $panel)"/> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </vxe-grid> |
| | | <div id="last"> |
| | | <span> |
| | | 小片数<vxe-input size="small" class="input" disabled></vxe-input> |
| | | 小片面<vxe-input size="small" class="input" disabled></vxe-input> |
| | | 原片数<vxe-input size="small" class="input" disabled></vxe-input> |
| | | 原片面<vxe-input size="small" class="input" disabled></vxe-input> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | #mange{ |
| | | #mange { |
| | | width: 100%; |
| | | height: 85%; |
| | | } |
| | | |
| | | #last { |
| | | margin-top: 10px; |
| | | } |
| | | .input{ |
| | | |
| | | .input { |
| | | width: 80px; |
| | | margin-left: 15px; |
| | | } |