add dialogForm of equipmentbind

src/views/base/equipmentBindSection/dialogForm.vue

@@ -0,0 +1,223 @@
+<!-- 
+    filename: dialogForm.vue
+    author: liubin
+    date: 2023-09-11 15:55:13
+    description: DialogForm for equipmentBindSection only
+-->
+
+<template>
+	<el-form ref="form" :model="form" label-width="100px" v-loading="formLoading">
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item
+					label="产线"
+					prop="productionLineId"
+					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+					<el-select
+						v-model="form.productionLineId"
+						placeholder="请选择产线"
+						@change="handleProductlineChange">
+						<el-option
+							v-for="opt in productionLineList"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+
+			<el-col :span="12">
+				<el-form-item
+					label="工段"
+					prop="workshopSectionId"
+					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+					<el-select
+						v-model="form.workshopSectionId"
+						placeholder="请选择工段"
+						@change="$emit('update', form)">
+						<el-option
+							v-for="opt in worksectionList"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item
+					label="设备"
+					prop="equipmentId"
+					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+					<el-select
+						v-model="form.equipmentId"
+						placeholder="请选择设备"
+						@change="$emit('update', form)">
+						<el-option
+							v-for="opt in equipmentList"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+
+			<el-col :span="12">
+				<el-form-item label="工段排序" prop="sort">
+					<el-input
+						v-model="form.sort"
+						@change="$emit('update', form)"
+						placeholder="请输入工段排序" />
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item label="产线数据类型" prop="lineDataType">
+					<el-select
+						v-model="form.lineDataType"
+						placeholder="请选择产线数据类型"
+						@change="$emit('update', form)">
+						<el-option
+							v-for="opt in [
+								{ label: '无类型', value: 0 },
+								{ label: '进口统计', value: 1 },
+								{ label: '出口统计', value: 2 },
+							]"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item label="工段数据类型" prop="sectionDataType">
+					<el-select
+						v-model="form.sectionDataType"
+						placeholder="请选择工段数据类型"
+						@change="$emit('update', form)">
+						<el-option
+							v-for="opt in [
+								{ label: '无类型', value: 0 },
+								{ label: '进口统计', value: 1 },
+								{ label: '出口统计', value: 2 },
+							]"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+		</el-row>
+	</el-form>
+</template>
+
+<script>
+export default {
+	name: 'DialogForm',
+	model: {
+		prop: 'dataForm',
+		event: 'update',
+	},
+	emits: ['update'],
+	components: {},
+	props: {
+		dataForm: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			formLoading: true,
+			productionLineList: [],
+			equipmentList: [],
+			worksectionList: [],
+		};
+	},
+	computed: {
+		form: {
+			get() {
+				return {
+                    productionLineId: this.dataForm.productionLineId,
+                    workshopSectionId: this.dataForm.workshopSectionId,
+                    equipmentId: this.dataForm.equipmentId,
+                    sort: this.dataForm.sort,
+                    lineDataType: this.dataForm.lineDataType,
+                    sectionDataType: this.dataForm.sectionDataType,
+                };
+			},
+			set(val) {
+				console.log('set form', val);
+			},
+		},
+	},
+	mounted() {
+		Promise.all([this.getProductLineList(), this.getEquipmentList()]).then(
+			() => {
+				this.formLoading = false;
+			}
+		);
+	},
+	methods: {
+		/** 模拟透传 ref  */
+		validate(cb) {
+			return this.$refs.form.validate(cb);
+		},
+		resetFields(args) {
+			return this.$refs.form.resetFields(args);
+		},
+		async handleProductlineChange(id) {
+			console.log('产线变化了!!!', id, this.form);
+			await this.getWorksectionList(id);
+			this.$emit('update', { ...this.form, workshopSectionId: null });
+		},
+		// getCode
+		async getCode(url) {
+			const response = await this.$axios(url);
+			return response.data;
+		},
+		// 获取产线列表
+		async getProductLineList() {
+			const response = await this.$axios('/base/production-line/listAll');
+			this.productionLineList = response.data.map((item) => ({
+				label: item.name,
+				value: item.id,
+			}));
+		},
+		// 获取设备列表
+		async getEquipmentList() {
+			const response = await this.$axios(
+				'/base/equipment/page?pageNo=1&pageSize=100'
+			);
+			this.equipmentList = response.data.list.map((item) => ({
+				label: item.name,
+				value: item.id,
+			}));
+		},
+		// 获取工段列表
+		async getWorksectionList(plId) {
+			const response = await this.$axios(
+				'/base/workshop-section/listByParentId',
+				{
+					params: {
+						id: plId,
+					},
+				}
+			);
+			this.worksectionList = response.data.map((item) => ({
+				label: item.name,
+				value: item.id,
+			}));
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.el-date-editor,
+.el-select {
+	width: 100%;
+}
+</style>

src/views/base/equipmentBindSection/index.vue

@@ -53,10 +53,10 @@ import {
 } from '@/api/base/equipmentBindSection';
 import moment from 'moment';
 import basicPageMixin from '@/mixins/lb/basicPageMixin';
-
+import DialogForm from './dialogForm.vue';
 export default {
 	name: 'EquipmentBindSection',
-	components: {},
+	components: { DialogForm },
 	mixins: [basicPageMixin],
 	data() {
 		return {
@@ -181,8 +181,8 @@ export default {
 						select: true,
 						label: '工段',
 						url: '/base/workshop-section/listByParentId', // 根据产线获取
-            // depends: '__product_line', // 依赖产线获取数据
-            depends: 'productionLineId',
+						// depends: '__product_line', // 依赖产线获取数据
+						depends: 'productionLineId',
 						prop: 'workshopSectionId',
 						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
 					},