FactorySystemWeb/src/views/half/components/EditViewOFF.vue

<template>
	<lay-container fluid="true" class="content-box">
		<FormulaView :teamId="dataInfoObj.FTeamID" :dataInfoObj="dataInfoObj" :halfId="dataInfoObj.FMaterialHalfIDs">
		</FormulaView>
		<lay-layer area="90%" v-model="showFreezingColumnSettingBox" title="固定列设置" :end="closeFreezingSetting">
			<FreezingColumnSetting v-if="showFreezingColumnSettingBox" :columns="originalColumns"
				:freezingColumns="freezingColumnSetting" @cancelClick="setFreezingColumnsSetting"></FreezingColumnSetting>
		</lay-layer>
		<lay-table id="dataTable" v-if="dataColumn.length > 0" height="320px" :columns="dataColumn" :data-source="dataList"
			:cellClassName="cellClassName" :cellStyle="cellStyle">
			<template v-slot:toolbar v-if="dataInfoObj.FCanEdit != 2">
				<lay-button size="sm" @click="saveBatch" type="primary" :disabled="editColumn.length === 0">保存
				</lay-button>
				<lay-input :class="this.isShow ? 'isShow' : 'isHidden'" v-model="inputCodeValue" :readonly="true">
					<template #prepend>半成品编号：</template>
				</lay-input>
				<lay-input :class="this.isShow ? 'isShow' : 'isHidden'" v-model="inputDescValue" :readonly="true">
					<template #prepend>描述：</template>
				</lay-input>
				<lay-button size="sm" type="primary" style="float:right;" :disabled="editColumn.length === 0"
					@click="_clickFreezingColumnSetting()">固定项
				</lay-button>
			</template>
			<template v-for="item in editColumn" v-slot:[item.key]="{ data }">
				<lay-select v-if="item.key == 'FTypeID1'" size="sm" v-model="data['FTypeID1']"
					@change="_changeType(data, 1)" :showEmpty="false">
					<lay-select-option v-for="(tIdv, tIdx) in typeList[0]" :key="tIdx" :value="tIdv.FID"
						:label="tIdv.FName"></lay-select-option>
				</lay-select>
				<lay-select v-else-if="item.key == 'FTypeID2'" size="sm" v-model="data['FTypeID2']"
					@change="_changeType(data, 2)" :showEmpty="false">
					<lay-select-option v-show="data.FTypeID1 == tIdv.FParentID" v-for="(tIdv, tIdx) in typeList[1]"
						:key="tIdx" :value="tIdv.FID" :label="tIdv.FName"></lay-select-option>
				</lay-select>
				<lay-select v-else-if="item.selectType" size="sm" v-model="data[item.key]" :showEmpty="false">
					<lay-select-option v-for="(tIdv, tIdx) in selectDataMap['FType' + item.selectTypeId]" :key="tIdx"
						:value="tIdv.FValue" :label="tIdv.FName"></lay-select-option>
				</lay-select>
				<lay-input v-else-if="!item.dataType" size="sm" v-model="data[item.key]"></lay-input>
			</template>
		</lay-table>
		<OperateLog v-if="dataInfoObj.FTeamID" ref="OperateLog" :dataInfoObj="dataInfoObj"></OperateLog>
	</lay-container>
</template>

<style scoped>
.content-box {
	margin: 30px 10px;
	display: block;
	position: relative;
	clear: both;
	float: none;
	min-height: 740px;
}


.row-select td {
	overflow: inherit;
}

.layui-select {
	width: 100%;
}

.edit {
	color: green;
}

:deep(.edit-item .layui-input) {
	border-color: #5FB878 !important;
}

:deep(.edit-item .layui-input:hover) {
	border-color: #009688 !important;
	color: #009688;
}

.isShow {
	width: 370px;
	height: 30px;
	border: none;
}

.isHidden {
	display: none;
}

.isBomHidden {
	display: none;
}
</style>
<script>
import {
	ref
} from 'vue';
import {
	GetMaterialById
} from "/src/api/api/material";
import {
	getListByHalfMaterialTeamId,
	updateBatchById4
} from "/src/api/api/view";
import {
	getBasicRoleList,
	GetFreezingColumns
} from "/src/api/api/user";
import {
	getDataCode,
	commonSave
} from "/src/api/api/common";

import {
	getInfoData,
	changeInfoData,
	GetMaterialInfoList
} from "/src/api/api/materialType";
import OperateLog from "./OperateLog.vue";
import FormulaView from "./FormulaView.vue";
import FreezingColumnSetting from './FreezingColumnSetting.vue';

export default {
	components: {
		OperateLog,
		FormulaView,
		FreezingColumnSetting
	},
	setup() {
		const dataColumn = ref([]);
		const dataList = ref([]);
		const editColumn = ref([]);
		const selectDataMap = ref(null);
		const typeList = ref([
			[],
			[]
		]);
		const userPower = ref([
			[],
			[]
		]);

		const cellStyle = function (row, column, rowIndex, columnIndex) {
			let back = column.table == "TFS_ViewMaterial" ? "background:rgb(246, 246, 246)" : "";
			let info = row["info"];
			if (info) {
				if (typeof(document.getElementsByClassName(column.key + "_" + rowIndex + "_" + columnIndex)[0])!="undefined") {
					switch (info[column.key + "Type"]) {
						case "1":
							 document.getElementsByClassName(column.key + "_" + rowIndex + "_" + columnIndex)[0].classList.add("one");
							return back;
						case "2":
							 document.getElementsByClassName(column.key + "_" + rowIndex + "_" + columnIndex)[0].classList.add("twe");
							return back;
						case "3":
							 document.getElementsByClassName(column.key + "_" + rowIndex + "_" + columnIndex)[0].classList.add("three");
							return back;
						case "4":
							 document.getElementsByClassName(column.key + "_" + rowIndex + "_" + columnIndex)[0].classList.add("four");
							return back;
						default:
							document.getElementsByClassName(column.key + "_" + rowIndex + "_" + columnIndex)[0].classList.remove("one");
							document.getElementsByClassName(column.key + "_" + rowIndex + "_" + columnIndex)[0].classList.remove("twe");
							document.getElementsByClassName(column.key + "_" + rowIndex + "_" + columnIndex)[0].classList.remove("three");
							document.getElementsByClassName(column.key + "_" + rowIndex + "_" + columnIndex)[0].classList.remove("four")
							return back;
					}
				}

			}
			return back;
		};
		const cellClassName = function (row, column, rowIndex, columnIndex) {
			return column.cellClass = column.key + "_" + rowIndex + "_" + columnIndex;
		}
		const inputCodeValue = ref("");
		const inputDescValue = ref("");
		const visible2 = ref(false)
		const changeVisible2 = function () {
			visible2.value = !visible2.value
		};
		const showFreezingColumnSettingBox = ref(false);
		const freezingColumnSetting = ref([]);
		const originalColumns = ref([]);
		const tmpDataColumn = ref([]);
		const materialInfoList = ref([]);
		const idx = ref([]);
		return {
			dataColumn,
			dataList,
			editColumn,
			selectDataMap,
			typeList,
			userPower,
			cellClassName,
			cellStyle,
			inputCodeValue,
			inputDescValue,
			isShow: false,
			isBomShow: false,
			visible2,
			changeVisible2,
			showFreezingColumnSettingBox,
			freezingColumnSetting,
			originalColumns,
			tmpDataColumn,
			materialInfoList,
			idx
		};
	},
	props: {
		dataInfoObj: {
			type: Object,
			default: () => { },
		},
		viewDataList: {
			type: Object,
			default: () => [],
		}
	},
	mounted() {
		this.getUserPower();
		//this.initPage(this.idx);
	},
	methods: {
		async getUserPower() {
			if (this.dataInfoObj.FCanEdit != 2) {
				this.userPower[0] = (await getBasicRoleList({
					FRoleType: 84,
					FViewType: this.dataInfoObj.FViewType,
					TeamId: this.dataInfoObj.FTeamID,
					Type: 2
				}) || []).map(it => parseInt(it.F2))
				this.userPower[1] = (await getBasicRoleList({
					FRoleType: 44,
					FViewType: this.dataInfoObj.FViewType,
					TeamId: this.dataInfoObj.FTeamID,
					Type: 2
				}) || []).map(it => parseInt(it.F2))
			}
			this.initPage(layer.load(2));
		},
		async initPage(idx) {
			this.idx = idx;
			let _data = await getListByHalfMaterialTeamId({
				teamId: this.dataInfoObj.FTeamID,
				viewType: this.dataInfoObj.FViewType
			});
			this.materialInfoList = await GetMaterialInfoList() || null;


			let freezingCols = await GetFreezingColumns();
			console.log('_data', _data);
			if (this.dataInfoObj.FViewType == 1 || this.dataInfoObj.FViewType == 10) {
				let dataResult = await GetMaterialById({
					ID: this.dataInfoObj.FMaterialHalfIDs
				})
				if (dataResult) {
					this.inputCodeValue = dataResult.Data.FCode;
					this.inputDescValue = dataResult.Data.FName;
				}

				this.isShow = true;
			} else if (this.dataInfoObj.FViewType == 2 || this.dataInfoObj.FViewType == 3 || this.dataInfoObj.FViewType == 4) {
				this.isBomShow = true;
			}

			this.typeList[0] = _data.types.filter(s => s.FDepth == 1) || [];
			this.typeList[1] = _data.types.filter(s => s.FDepth != 1) || [];
			let dataColumn = _data.columns || [];

			let editColumn = dataColumn.filter(it => {
				let b = false;
				if (this.dataInfoObj.FCanEdit != 2) {
					if (it.fieldType == 7) b = this.userPower[1].indexOf(it.id) >= 0;
					else b = this.userPower[0].indexOf(it.id) >= 0;
					if (b) {
						it.customSlot = it.key;
						it.cellClass = "edit-item"
					}
				}
				return b;
			});

			if (editColumn.length > 0) {
				if (this.selectDataMap == null) {
					let dataTypeIds = editColumn.filter(it => {
						it.selectType = it.dataType.startsWith('select:');
						if (it.selectType) {
							it.selectTypeId = it.dataType.substring(7)
						}
						return it.selectType;
					}).map(it => it.selectTypeId);
					if (dataTypeIds.length > 0) {
						this.selectDataMap = await getDataCode({
							FType: dataTypeIds.join(",")
						});
					}
				}

			}
			let columnsList = [];
			let col7 = dataColumn.filter(s => s.fieldType == 7) || [];

			_data.rows.forEach((item, i) => {

				columnsList = _data.columns.map(function (items) {
					let info = _data.infos[i]
					if (info) {
						let str = info[items.key + "Type"];
						if (typeof (str) != "undefined") {
							switch (str) {
								case "1":
									return items.cellClass = items.cellClass + " one";
								case "2":
									return items.cellClass = items.cellClass + " twe";
								case "3":
									return items.cellClass = items.cellClass + " three";
								case "4":
									return items.cellClass = items.cellClass + " four";
							}
						}
					}

					return items["cellClass"] = "";
				})
				// let k3Code = item.FBaseMaterialDesc;
				// if (k3Code.indexOf("@") > 0) {
				// 	item.FK3Code = k3Code.substr(0, k3Code.indexOf("@"));
				// 	item.FK3Name = k3Code.substr(k3Code.indexOf("@") + 1);
				// } else {
				// 	item.FK3Code = "";
				// 	item.FK3Name = "";
				// }
				// if (k3Code.lastIndexOf(".") > 0) {
				// 	item.FK3ShortCode = item.FK3Code.substr(item.FK3Code.lastIndexOf(".") + 1);
				// } else {
				// 	item.FK3ShortCode = "";
				// }
				let info = _data.infos.find(s => s.FDataID == item.FMaterialID) || null;
				if (info != null) {
					col7.forEach((col) => {
						item[col.key] = info[col.key] || item[col.key] || "";
					});
				}

			});
			let saveId = this.dataInfoObj.FViewType + "_" + this.dataInfoObj.FID;
			localStorage.setItem('EditView' + saveId, JSON.stringify(_data.rows));

			console.log('editColumn', editColumn);
			this.editColumn = editColumn;
			let $this = this;
			this.dataList = _data.rows.map(function (item) {
				item["info"] = $this.materialInfoList.Data.find(s => s.FDataID == item.FTypeID2);

				let fType1 = $this.typeList[0].find((t) => {
					if (item.FTypeID1) {
						return t.FID == item.FTypeID1
					}
				});

				let fType2 = $this.typeList[1].find((t) => {
					if (item.FTypeID2) {
						return t.FID == item.FTypeID2
					}
				})
				if ($this.dataInfoObj.FCanEdit == 2) {
					item.FTypeID1 = fType1 ? fType1.FName : item.FTypeID1;
					item.FTypeID2 = fType2 ? fType2.FName : item.FTypeID2;
				}
				else {

					let isFTypeID1 = $this.editColumn.find((t) => {
						return t.key == "FTypeID1";
					})
					let isFTypeID2 = $this.editColumn.find((t) => {
						return t.key == "FTypeID2";
					})

					if (!isFTypeID1 && !isFTypeID2) {
						item.FTypeID1 = fType1 ? fType1.FName : item.FTypeID1;
						item.FTypeID2 = fType2 ? fType2.FName : item.FTypeID2;
					}
				}



				return item;
			});
			this.dataColumn = dataColumn;
			this.originalColumns = this.deepCopy(dataColumn);
			let freezingColumns = freezingCols.FFreezingColumns

			if (freezingColumns) {
				let c_list = freezingColumns.split(",")
				c_list.forEach(c => {
					if (c && c.length > 0) {
						this.freezingColumnSetting.push(c)
					}
				})
			}

			if (this.freezingColumnSetting && this.freezingColumnSetting.length > 0) {
				this.dataColumn = ref([]);
				this.setFreezingColumns();
			}


			// this._changeType(_data.rows[0], 2);
			setTimeout(function () {
				layer.close(idx);
			}, 500);
		},

		getParamValues(name, arr) {
			var ret = []
			for (var i = 0, len = arr.length; i < len; i++) {
				if (arr[i][name]) {
					ret.push(arr[i][name])
				}
			}
			return ret
		},
		cancelClick(isRefresh) {
			isRefresh = isRefresh == undefined ? false : isRefresh;
			this.$emit('cancelClick', isRefresh);
		},
		async _changeType(data, type) {
			if (type == 1) {
				data.FTypeID2 = -1;
			} else {
				if (data.FTypeID2) {
					let result = await getInfoData({
						"FDataID": data.FTypeID2,
						"FType": 1
					}) || null;
					if (result != null && result.FID) {

						console.log('data.FTypeID1', data.FTypeID1);

						let type1 = this.typeList[0].filter(t => t.FValue == data.FTypeID1)[0];
						let typeName = type1.FName;

						if (typeName.indexOf("半成品") > 0) {
							data.FViewType = 2
						}

						if (typeName.indexOf("中间品") > 0) {
							data.FViewType = 3
						}

						if (typeName.indexOf("香基") > 0) {
							data.FViewType = 4
						}

						if (typeName.indexOf("原料类") > 0) {
							data.FViewType = 5
						}

						if (typeName.indexOf("成品") > 0) {
							data.FViewType = 1
						}
						data["info"] = this.materialInfoList.Data.find(s => s.FDataID == data.FTypeID2);

						this.dataColumn.forEach((item) => {
							if (item.key != "FTypeID1" && item.key != "FTypeID2" && result[item.key]) {
								data[item.key] = result[item.key]
							}
							//data[item.key] = result[item.key] || data[item.key] || "";
						});

					}
				}
			}
		},
		async saveBatch() {
			let idx = layer.load(2);
			let updateObj = {
				LogList: [],
				FTeamID: this.dataInfoObj['FTeamID'],
				FViewType: this.dataInfoObj.FViewType,
				FType: this.dataInfoObj.FType
			};
			let saveId = this.dataInfoObj.FViewType + "_" + this.dataInfoObj.FID;
			let cacheDataList = JSON.parse(localStorage.getItem('EditView' + saveId));
			console.log('cacheDataList', cacheDataList);
			let allTypeSelected = true;
			this.dataList.forEach((row, index) => {
				let cache = cacheDataList[index];
				let dataObj = {};
				if (row["FTypeID1"] == -1 || row["FTypeID2"] == -1 || row["FTypeID1"] == '' || row["FTypeID2"] == '') {
					layer.msg("请先为所有物料选择分类", { icon: 2, time: 1000 });
					layer.close(idx);
					allTypeSelected = false;
					return
				}
				console.log('this.editColumn', this.editColumn);
				for (let col of this.editColumn) {
					let valTemp = row[col.key];
					if (this.dataInfoObj.FViewType == 10) {
						if (!dataObj[col.table]) {
							dataObj[col.table] = {};
							dataObj[col.table].FMaterialID = row["FMaterialID"];
						}
						dataObj[col.table][col.key] = valTemp;
						if (col.key == "FTypeID1" || col.key == "FTypeID2") {
							let temps = this.typeList[col.key == "FTypeID1" ? 0 : 1] || [];
							let temp = temps.find(s => s.FID == valTemp) || null;
							valTemp = temp == null ? "" : temp.FName;
						}
						updateObj.LogList.push(col.title + "：" + (valTemp == "" ? "删除" : valTemp));
					} else if (valTemp != cache[col.key]) {
						if (!dataObj[col.table]) {
							dataObj[col.table] = {};
							dataObj[col.table].FMaterialID = row["FMaterialID"];
						}
						dataObj[col.table][col.key] = valTemp;
						if (col.key == "FTypeID1" || col.key == "FTypeID2") {
							let temps = this.typeList[col.key == "FTypeID1" ? 0 : 1] || [];
							let temp = temps.find(s => s.FID == valTemp) || null;
							valTemp = temp == null ? "" : temp.FName;
						}
						updateObj.LogList.push(col.title + "：" + (valTemp == "" ? "删除" : valTemp));
					}
				}

				console.log('dataObj', dataObj);

				for (let key in dataObj) {
					if (!updateObj[key]) updateObj[key] = [];
					updateObj[key].push(dataObj[key]);
				}
			});
			if (!allTypeSelected) {
				return false;
			}
			let updateLog = updateObj.LogList.join("、");
			delete updateObj.LogList
			// 发送保存请求
			console.log('updateObj', updateObj);
			let _result = await updateBatchById4(updateObj);
			if (_result.Code === 200) {
				await commonSave({
					teamId: updateObj.FTeamID,
					type: this.dataInfoObj['FType'],
					desc: updateLog
				}, "OperateLog");
				let $this = this;
				//$this.initPage();
				localStorage.setItem('EditView' + saveId, JSON.stringify(this.dataList));
				setTimeout(function () {
					layer.close(idx);
					layer.msg('保存成功');
					$this.$emit('cancelClick', true, false);
					$this.$refs.OperateLog._getPageList();
				}, 500);
			}
		},
		_clickFreezingColumnSetting() {
			this.dataColumn = ref([]);
			this.showFreezingColumnSettingBox = true;
		},
		setFreezingColumns() {
			this.tmpDataColumn = this.deepCopy(this.originalColumns);
			let freezingColumns = [];
			if (this.freezingColumnSetting && this.freezingColumnSetting.length > 0) {
				this.freezingColumnSetting.forEach(column => {
					let colIndex = this.tmpDataColumn.findIndex(d => d.key === column);
					if (colIndex >= 0) {
						let fc = this.tmpDataColumn.splice(colIndex, 1)[0];
						if (fc) {
							fc.fixed = "left";
							freezingColumns.push(fc);
						}
					}
				})

				this.dataColumn = freezingColumns.concat(this.tmpDataColumn);

			} else {
				this.dataColumn = this.tmpDataColumn;
			}
			this.$nextTick();
		},
		setFreezingColumnsSetting(fcs) {
			this.freezingColumnSetting = fcs;
			if (fcs && fcs.length > 0) {
			} else {
				this.dataColumn = this.originalColumns;
			}
			this.showFreezingColumnSettingBox = false;
		},
		closeFreezingSetting() {
			this.setFreezingColumns();
		},
		deepCopy(arr) {
			return JSON.parse(JSON.stringify(arr))
		}
	}
}
</script>