FactorySystemWeb/src/views/half/half.vue

<template>
	<lay-container fluid="true"
		:style="'padding:10px;height:' + (dataInfoObj != undefined ? (dataInfoObj.FHeight + 'px') : 'auto')">
		<lay-row space="10">
			<lay-col span="24">
				<lay-card>
					<lay-form :model="searchObj" class="search-box">
						<lay-row class="search-items">
							<lay-form-item label="新试验号" prop="FTestCode">
								<lay-input v-model="searchObj.FTestCode"></lay-input>
							</lay-form-item>
							<!-- <lay-form-item label="类型" prop="FType">
								<lay-select v-model="searchObj.FType">
									<lay-select-option v-for="(tIdv, tIdx) in typeList" :key="tIdx" :value="tIdv.FValue"
										:label="tIdv.FName"></lay-select-option>
								</lay-select>
							</lay-form-item> -->
							<lay-form-item v-if="postData.FState != 99" label="状态" prop="FState">
								<lay-select v-model="searchObj.FState">
									<lay-select-option v-for="(tv, tx) in stateList" :key="tx" :value="tv.id"
										:label="tv.name"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item label="发起日期" prop="FAddDate">
								<lay-date-picker v-model="searchObj.FAddDate" range placeholder="type : date">
								</lay-date-picker>
							</lay-form-item>
						</lay-row>
						<lay-form-item class="search-btn">
							<lay-button size="sm" type="primary" @click="_clickSearch">搜索</lay-button>
							<lay-button size="sm" @click="_clickReset">重置</lay-button>
						</lay-form-item>
					</lay-form>
					<lay-table v-if="hasLoaded" :columns="dataColumn" id="id" :dataSource="dataList"
						v-model:selectedKeys="selectedKeys" :checkbox="checkbox" :default-toolbar="defaultToolbar"
						:page="dataList.length > 0 ? pageInfo : null" @change="changePage">
						<template v-slot:toolbar>
							<lay-button size="sm" @click="_getPageList(false, true)">刷新</lay-button>
							<lay-button size="sm" type="primary" @click="showEditMaterial(2)">修改</lay-button>
						</template>
						<template v-slot:FStateName="{ data }">
							<span v-if="data.FStateName == '已完成'" style="color:#5FB878">{{ data.FStateName }}</span>
							<span v-else style="color:#1E9FFF">{{ data.FStateName }}</span>
						</template>
						<template v-if="dataInfoObj == undefined || !dataInfoObj.FID" v-slot:operator="{ data }">
							<lay-button size="xs" type="primary" @click="showEditMaterial(3, data)">详情</lay-button>
						</template>
					</lay-table>
				</lay-card>
			</lay-col>
		</lay-row>
		<lay-layer :area="modelArea[2]" v-model="showEditBox[2]" title="配方变更">
			<EditMateria v-if="showEditBox[2]" :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></EditMateria>
		</lay-layer>
		<lay-layer :area="modelArea[3]" v-model="showEditBox[3]" title="配方变更详情">
			<ShowData1 v-if="showEditBox[3]" :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></ShowData1>
		</lay-layer>
	</lay-container>
</template>
<style scoped>
.layui-table-body {
	min-height: 50vh;
}
</style>
<script>
import {
	ref,
	watch
} from "vue";
import {
	getBasicList,
	getPageList
} from "/src/api/api/common";
import{
	getFactoryList
}from "/src/api/api/factory";
import ShowData1 from '../half/components/ShowData1.vue';
import EditMateria from '../half/components/EditMateria.vue';
import EditView from '../half/components/EditView.vue';
import { GetMaterialTeamworkPageList } from "/src/api/api/halfmaterialteamwork"
import '@layui/layui-vue/es/checkbox/index.css';
import '@layui/layui-vue/es/radio/index.css';

export default {
	components: {
		EditMateria,
		EditView,
		ShowData1
	},
	setup() {
		let dataColumn = [
			{
				title: "序号",
				key: "FID",
				width: "160px",
				align: 'center',
				hide: false
			}, {
				title: "原试验号",
				key: "FTestCode",
				width: "300px",
				align: 'center',
				hide: false
			},
			{
				title: "原版本号",
				key: "FVersionCode",
				width: "160px",
				align: 'center',
				hide: false
			},
			{
				title: "新试验号",
				key: "FNewTestCode",
				width: "160px",
				align: 'center',
				hide: false
			},
			{
				title: "新版本号",
				key: "FNewVersionCode",
				width: "160px",
				align: 'center'
			},
			{
				title: "模式",
				key: "FCreateFactoryID",
				width: "150px",
				align: 'center'
			},

			{
				title: "发起时间",
				key: "FAddDate",
				width: "180px",
				align: 'center'
			},
			{
				title: "发起人",
				key: "FName",
				width: "178px",
				align: 'center'
			},
			{
				title: "状态",
				key: "FStateName",
				width: "100px",
				align: 'center',
				customSlot: 'FStateName',
			},
			{
				title: "操作",
				key: "operator",
				width: "130px",
				fixed: "right",
				customSlot: 'operator',
				align: 'center'
			}
		];
		const selectedKeys = ref(["1"]);
		const checkbox = ref(false);
		const defaultToolbar = ref(true);
		const factoryLists = ref([]);
		const pageInfo = ref({
			total: 0,
			limit: 10,
			current: 1
		});
		const dataList = ref([]);
		const typeList = ref([]);
		const searchObj = ref({});
		const postData = ref({});
		const MaterialModel = ref({});
		const showEditBox = ref([false, false, false, false, false, false, false, false, false, false, false, false, false]);
		const modelArea = ref(["70%", "70%", "70%", "40%", "70%", "70%", "70%", "70%", "700px", "70%", "70%", "70%", "70%"]);
		const objInfoObj = ref({});
		const editType = ref(1);
		const stateList = ref([{
			id: 1,
			name: "进行中"
		}, {
			id: 2,
			name: "已完成"
		}]);
		const hasLoaded = ref(false);
		const dataItem = ref([]);
		return {
			selectedKeys,
			checkbox,
			defaultToolbar,
			dataColumn,
			dataList,
			pageInfo,
			searchObj,
			postData,
			typeList,
			showEditBox,
			modelArea,
			objInfoObj,
			editType,
			stateList,
			hasLoaded,
			MaterialModel,
			dataItem,
			factoryLists
		};
	},
	props: {
		dataInfoObj: {
			type: Object,
			default: () => { },
		},

		pageTypeObj: {
			type: Number,
			default: () => 1,
		}
	},
	mounted() {
		if (this.dataInfoObj) {
			this.dataColumn.pop();
			this.dataColumn[0].hide = true;
			this.dataColumn[1].hide = true;
			this.dataColumn[2].hide = true;
			this.dataColumn[7].hide = false;
		}
		this._getTypeList();
		this._getFactoryList();
		
	},
	methods: {
		async _getFactoryList(){
            this.factoryLists=await getFactoryList()||[];
			this._getPageList(true);
		},
		changePage(obj) {
			this.pageInfo.current = obj.current;
			this.pageInfo.limit = obj.limit;
			this._getPageList();
		},
		cancelClick(isRefresh, onlyRefresh) {
			if (isRefresh) {
				this._getPageList(true);
			}
			if (onlyRefresh) return false;
			for (let i = 0; i < this.showEditBox.length; i++) {
				this.showEditBox[i] = false;
			}
		},
		async _getTypeList() {
			this.typeList = await getBasicList(33) || [];
		},
		//分页列表
		async _getPageList(isFirst, showOk) {
			let factoryList=[];
			for(let i=0;i<this.factoryLists.length;i++){
				factoryList.push(this.factoryLists[i]);
			}

			this.pageInfo.total = 0;
			if (isFirst) {
				this.pageInfo.current = 1;
				this.pageInfo.total = 0;
			}
			this.postData.FPageIndex = this.pageInfo.current;
			this.postData.FPageSize = this.pageInfo.limit;
			if (this.dataInfoObj != undefined) {
				this.postData.FDataType = this.dataInfoObj;
			}
			let $this = this;
			let result = await GetMaterialTeamworkPageList(this.postData);
			this.dataList = result.Data.List.map(function (item) {
				item.FAddDate = item.FAddDate == null ? "" : $this.dateFormat(item.FAddDate);

				if(factoryList){
					item.FCreateFactoryID=factoryList.find(s=>s.FID==item.FCreateFactoryID).FName;
				}
				if (item.FState == 2) {
					item["FStateName"] = "已完成";
				}
				else if (item.FState == 1) {
					item["FStateName"] = "进行中";
				}
				return item;
			});

			this.hasLoaded = true;
		},
		//日期处理
		dateFormat(dataStr) {
			return dataStr.replace('T', ' ').split('.')[0];
		},
		getData(data) {
			this.MaterialModel = data;
			for (let i = 0; i < this.showEditBox.length; i++) {
				this.showEditBox[i] = false;
			}
			this.showEditBox[11] = true;
			this.editType = 1;

		},
		showEditMaterial(i, data) {
			if (data) {
				data["FTeamID"] = data.FID;
			}
			let height = document.documentElement.clientHeight || document.body.clientHeight || 1000;
			this.objInfoObj = data || {};
			this.objInfoObj["FHeight"] = Math.ceil(height * 0.8);

			this.showEditBox[i] = true;
		},
		_clickSetInfo(data, type) {
			
			for (let i = 0; i < this.showEditBox.length; i++) {
				this.showEditBox[i] = false;
			}
			if (data.FType == 1) {
				data.FBoxType = 1; //配方选择
			} else if (data.FType == 2) {
				data.FBoxType = 2; //BOM下载
			} else if (data.FType == 9 || data.FType == 10) {
				data.FBoxType = 4; //新包材新增、新子项包材申请
			} else if ((data.FType >= 3 && data.FType <= 7) || data.FType == 11) {
				data.FBoxType = 3; //视图编辑
			} else if (data.FType == 8) {
				data.FBoxType = 5; //组编号申请
			} else if (data.FType == 12) {
				data.FBoxType = 6; //成品视图物料组复核
			} else if (data.FType == 13) {
				data.FBoxType = 7; //流程确认完成
			} else if (data.FType == 14) {
				data.FBoxType = 8; //补充包材规格
			} else if (data.FType == 15) {
				data.FBoxType = 3; //物料选择类型
			} else if (data.FType == 16) {
				this.dataItem = data;
				data.FBoxType = 10; //替代料确认
			} else {
				return layer.msg("未知事项类型");
			}
			this.objInfoObj = data;
			this.editType = type;
			this.showEditBox[data.FBoxType] = true;
		},


		//检索-检索
		_clickSearch() {
			this.postData = {};
			for (let key in this.searchObj) {
				let val = this.searchObj[key];
				if (val != null && val !== "") this.postData[key] = val;
			}
			this._getPageList(true);
		},
		//检索-重置
		_clickReset() {
			this.searchObj = {};
			this._clickSearch();
		}
	}
}
</script>