固定列编辑

src/views/Need/components/EditView.vue

@@ -1,18 +1,23 @@
 <template>
 	<lay-container fluid="true" class="content-box">
 		<FormulaView :teamId="dataInfoObj.FTeamID" :halfId="dataInfoObj.FMaterialHalfIDs"></FormulaView>
-		<lay-table class="row-select" v-if="dataColumn.length>0" height="320px" :columns="dataColumn"
+		
+		<lay-layer area="90%" v-model="showFreezingColumnSettingBox" title="固定列设置">
+			<FreezingColumnSetting v-if="showFreezingColumnSettingBox" :columns="tmpDataColumn" :freezingColumns="freezingColumnSetting" @cancelClick="setFreezingColumnsSetting"></FreezingColumnSetting>
+		</lay-layer>
+		<lay-table id="dataTable" v-if="dataColumn.length>0" height="320px" :columns="dataColumn"
 				   :data-source="dataList" :cellStyle="cellStyle" :cellClassName="cellClassName">
 			<template v-slot:toolbar v-if="dataInfoObj.FCanEdit!=2">
 				<lay-button size="sm" @click="saveBatch" type="primary" :disabled="editColumn.length===0">保存
 				</lay-button>
-				<!--				<lay-button size="sm" type="primary" :class="this.isBomShow ? 'isBomShow' : 'isBomHidden'" @click="changeVisible2">查看BOM配方</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']"
@@ -33,9 +38,6 @@
 			</template>
 		</lay-table>
 		<OperateLog v-if="dataInfoObj.FTeamID" ref="OperateLog" :dataInfoObj="dataInfoObj"></OperateLog>
-		<!--		<lay-layer title="标题" :move="false" v-model="visible2">-->
-		<!--			内容-->
-		<!--		</lay-layer>-->
 	</lay-container>
 </template>
 
@@ -103,11 +105,13 @@
 	} 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
+			FormulaView,
+			FreezingColumnSetting
 		},
 		setup() {
 			const dataColumn = ref([]);
@@ -134,7 +138,10 @@
 			const visible2 = ref(false)
 			const changeVisible2 = function() {
 				visible2.value = !visible2.value
-			}
+			};
+			const showFreezingColumnSettingBox = ref(false);
+			const freezingColumnSetting = ref([]);
+			const tmpDataColumn = ref([]);
 			return {
 				dataColumn,
 				dataList,
@@ -149,7 +156,10 @@
 				isShow: false,
 				isBomShow :false,
 				visible2,
-				changeVisible2
+				changeVisible2,
+				showFreezingColumnSettingBox,
+				freezingColumnSetting,
+				tmpDataColumn
 			};
 		},
 		props: {
@@ -167,7 +177,6 @@
 		},
 		methods: {
 			async getUserPower() {
-				console.log('this.dataInfoObj', this.dataInfoObj);
 				if (this.dataInfoObj.FCanEdit != 2) {
 					this.userPower[0] = (await getBasicRoleList({
 						FRoleType: 40,
@@ -260,6 +269,7 @@
 				this.editColumn = editColumn;
 				this.dataList = _data.rows;
 				this.dataColumn = dataColumn;
+
 				setTimeout(function() {
 					layer.close(idx);
 				}, 500);
@@ -346,6 +356,54 @@
 					layer.close(idx);
 					layer.msg('您没有做任何更改')
 				}
+			},
+			_clickFreezingColumnSetting() {
+				this.tmpDataColumn = this.dataColumn;
+				this.dataColumn = ref([]);
+				this.showFreezingColumnSettingBox = true;
+				console.log('before', this.tmpDataColumn);
+			},
+			setFreezingColumns() {
+				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 proxyFc = this.tmpDataColumn.splice(colIndex, 1)[0];
+							const {proxy, revoke} = Proxy.revocable(proxyFc, {});
+							const fc = {...proxy};
+							revoke();
+							console.log('fc', fc);
+							if (fc) {
+								fc.fixed = "left";
+								freezingColumns.push(fc);
+							}
+						}
+					})
+				}
+
+				if (freezingColumns && freezingColumns.length > 0) {
+					for(let i=freezingColumns.length-1; i>=0; i--) {
+						this.tmpDataColumn.unshift(freezingColumns[i]);
+					}
+					
+					// freezingColumns = freezingColumns.concat(this.tmpDataColumn);
+					this.dataColumn = this.tmpDataColumn;
+					console.log('after', this.dataColumn);
+				} else {
+					this.dataColumn = this.tmpDataColumn;
+				}
+			},
+			setFreezingColumnsSetting(fcs) {
+				if (fcs && fcs.length > 0) {
+					this.freezingColumnSetting = fcs;
+					// this.freezingColumnSetting = ["FTestCode", "FMaterialGroup", "FWorkCenter"];
+					this.setFreezingColumns();
+				} else {
+					this.dataColumn = this.tmpDataColumn;
+				}
+				
+				this.showFreezingColumnSettingBox = false;
 			}
 		}
 	}

src/views/Need/components/FormulaView.vue

@@ -80,9 +80,6 @@
 				}];
                 let dataList = [];
 
-                console.log('this.teamId', this.teamId);
-                console.log('this.halfId', this.halfId);
-
 				let postData = {
 					FTeamID: this.teamId,
 					FViewType: 2,
@@ -95,7 +92,6 @@
                 let formulaList = result["List1"]
 
                 if (formulaList) {
-                    console.log('formulaList', formulaList);
                     for (let key in formulaList[0]) {
                         let width = (key.indexOf("描述") != -1 || key == "文本" || key == "物料") ? "300px" :
                             "130px";

src/views/Need/components/FreezingColumnSetting.vue

@@ -0,0 +1,78 @@
+<template>
+    <lay-container>
+        <view class="layui-item33 color999" :style="'max-height:900px'">
+            <lay-row space="10">
+                <lay-col md="4" sm="12" xs="24" v-for="(item, index) in columns">
+                    <lay-checkbox-group v-model="checkedItem">
+                        <lay-checkbox :name="item.title" skin="primary" :value="item.key">
+                            {{ item.title }}
+                        </lay-checkbox>
+                    </lay-checkbox-group>
+                </lay-col>
+            </lay-row>
+        </view>
+        <view class="menuBtn">
+			<lay-button type="primary" @click="submitClick">确定</lay-button>
+			<lay-button @click="cancelClick">取消</lay-button>
+		</view>
+    </lay-container>
+</template>
+<script>
+    import {
+		ref
+	} from 'vue';
+    export default {
+        setup() {
+            const columnList = ref([]);
+            const checkedItem = ref([]);
+
+            return {
+                columnList,
+                checkedItem,
+            }
+        },
+        props: {
+            columns: {
+				type: Object,
+				default: () => [],
+			},
+            freezingColumns: {
+                type: Object,
+				default: () => [],
+            }
+        },
+        mounted() {
+            this.initPage();
+		},
+        methods: {
+            initPage() {
+                this.columnList = this.columns;
+                this.checkedItem = this.freezingColumns
+            },
+            cancelClick() {
+                this.$emit('cancelClick');
+            },
+            submitClick() {
+                this.$emit('cancelClick', this.checkedItem);
+            }
+        }
+    }
+</script>
+<style scoped>
+    .layui-item33 {
+		width: 90%;
+		padding-right: 30px;
+		margin: 30px auto 10px;
+		display: block;
+		overflow: auto;
+		position: relative;
+		clear: both;		
+	}
+
+    .menuBtn {
+		display: block;
+		text-align: center;
+		width: 96%;
+		margin: 20px auto;
+	}
+</style>