ui

2023-11-27 20:41:45 +08:00
parent a7f1087775
commit b527589e0f
20 changed files with 513 additions and 360 deletions
--- a/src/views/base/materialProductBom/add-or-updata.vue
+++ b/src/views/base/materialProductBom/add-or-updata.vue
@@ -2,14 +2,14 @@
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: DY
- * @LastEditTime: 2023-11-25 19:10:12
+ * @LastEditTime: 2023-11-27 19:50:36
 * @Description:
 -->
 <template>
 	<el-drawer
 		:visible.sync="visible"
 		:show-close="false"
-		:wrapper-closable="false"
+		:wrapper-closable="isdetail"
 		class="drawer"
 		size="70%">
 		<small-title slot="title" :no-padding="true">
@@ -25,7 +25,7 @@
 					label-width="100px"
 					label-position="top">
 					<el-row :gutter="20">
-						<el-col :span="12">
+						<el-col :span="8">
 							<el-form-item label="产品名称" prop="productId">
 								<el-select
 									v-model="dataForm.productId"
@@ -42,15 +42,17 @@
 								</el-select>
 							</el-form-item>
 						</el-col>
-						<el-col :span="12">
+						<el-col :span="8">
 							<el-form-item label="产品BOM编码" prop="code">
 								<el-input v-model="dataForm.code" :disabled="isdetail" placeholder="请输入产品Bom编码" />
 							</el-form-item>
 						</el-col>
+						<el-col :span="8">
+							<el-form-item label="备注" prop="remark">
+								<el-input v-model="dataForm.remark" :disabled="isdetail" clearable placeholder="请输入备注" />
+							</el-form-item>
+						</el-col>
 					</el-row>
-					<el-form-item label="备注" prop="remark">
-						<el-input v-model="dataForm.remark" :disabled="isdetail" clearable placeholder="请输入备注" />
-					</el-form-item>
 				</el-form>
 			</div>
 			<div class="attr-list" v-if="idAttrShow">
@@ -60,92 +62,26 @@
 					BOM明细
 				</small-title>

-				<!-- <base-table
+				<div v-if="!isdetail" class="action_btn">
+          <template>
+            <span style="display: inline-block;">
+              <el-button type="text" @click="addNew()" icon="el-icon-plus">添加</el-button>
+            </span>
+          </template>
+        </div>
+				<base-table
 					:table-props="tableProps"
 					:page="listQuery.pageNo"
 					:limit="listQuery.pageSize"
-					:add-button-show="isdetail ? null : '添加属性'"
-					@emitButtonClick="addNew()"
-					:table-data="materialAttrList">
+					:table-data="tableData">
 					<method-btn
 						v-if="!isdetail"
 						slot="handleBtn"
-						:width="120"
+						:width="90"
 						label="操作"
 						:method-list="tableBtn"
 						@clickBtn="handleClick" />
-				</base-table> -->
-				<el-button v-show="!isdetail" type="success" size="small" style="float: right" @click="addRow()">添加一行</el-button>
-				<el-table
-					:data="tableData"
-      		style="width: 100%">
-					<el-table-column type="index" label="序号" />
-					<el-table-column prop="createTime" label="添加时间">
-						<template slot-scope="scope">
-							<span>{{ parseTime(scope.row.createTime) }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="materialId" label="物料名称*">
-						<template slot-scope="scope">
-							<el-select
-								v-model="scope.row.materialId"
-								filterable
-								clearable
-								:disabled="!scope.row.isEdit"
-								placeholder="请选择物料"
-								@change="setCode(scope.row)">
-								<el-option
-									v-for="dict in materialList"
-									:key="dict.id"
-									:label="dict.name"
-									:value="dict.id" />
-							</el-select>
-							<span v-if="scope.row.isShow" style="color: red">物料不可为空！</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="materialCode" label="物料编码" />
-					<el-table-column prop="mUnit" label="单位" />
-					<el-table-column prop="num" label="数量*">
-						<template slot-scope="scope">
-							<el-input v-model.number="scope.row.num" :disabled="!scope.row.isEdit" @input="changeNum(scope.row)"></el-input>
-							<span v-if="scope.row.isNum" style="color: red">数量不可为空！</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="remark" label="备注">
-						<template slot-scope="scope">
-							<el-input v-model="scope.row.remark" :disabled="!scope.row.isEdit"></el-input>
-						</template>
-					</el-table-column>
-					<el-table-column v-if="!isdetail" label="操作">
-						<template slot-scope="scope">
-							<el-tooltip v-if="!scope.row.isEdit" placement="top" content="编辑">
-								<el-button
-									type="text"
-									:style="{color:'#0B58FF'}"
-									size="mini"
-									@click="edit(scope.row)"
-								>
-									<!-- 此处的icon的名字命名为'table_'加上按钮的type -->
-									<svg-icon style="width: 18px; height: 18px" class="item-icon" icon-class="edit" />
-									<!-- <span>{{ item.btnName | i18nFilter }}</span> -->
-								</el-button>
-							</el-tooltip>
-							<el-button v-else type="text" size="small" @click="saveData(scope.row)">保存</el-button>
-							<el-tooltip placement="top" content="删除">
-								<el-button
-									type="text"
-									:style="{color:'#FF5454'}"
-									size="mini"
-									@click="deleteDetail(scope.row)"
-								>
-									<!-- 此处的icon的名字命名为'table_'加上按钮的type -->
-									<svg-icon style="width: 18px; height: 18px" class="item-icon" icon-class="table_delete" />
-									<!-- <span>{{ item.btnName | i18nFilter }}</span> -->
-								</el-button>
-							</el-tooltip>
-						</template>
-					</el-table-column>
-				</el-table>
+				</base-table>
 				<pagination
 					v-show="listQuery.total > 0"
 					:total="listQuery.total"
@@ -155,20 +91,17 @@
 					@pagination="getList" />
 			</div>

-			<div class="drawer-body__footer">
-				<el-button style="" @click="goback()">{{ isdetail ? '关闭' : '取消' }}</el-button>
-				<!-- <el-button v-if="isdetail" type="primary" @click="goEdit()">
-					编辑
-				</el-button> -->
-				<el-button v-if="!isdetail" type="primary" @click="dataFormSubmit()">确定</el-button>
+			<div v-if="!isdetail" class="drawer-body__footer">
+				<el-button style="" @click="goback()">取消</el-button>
+				<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
 			</div>
 		</div>

-		<!-- <attr-add
+		<attr-add
 			v-if="addOrUpdateVisible"
 			ref="addOrUpdate"
-			:material-id="dataForm.id"
-			@refreshDataList="getList" /> -->
+			:bom-id="dataForm.id"
+			@refreshDataList="getList" />
 	</el-drawer>
 </template>

@@ -179,7 +112,8 @@ import { getMaterialList } from "@/api/base/material";
 import { listData } from "@/api/system/dict/data";
 import SmallTitle from '../material/SmallTitle';
 import { parseTime } from '../../core/mixins/code-filter';
-// import attrAdd from './attr-add';
+import attrAdd from './attr-add';
+import { publicFormatter } from '@/utils/dict';

 const tableBtn = [
 	{
@@ -198,18 +132,31 @@ const tableProps = [
 		filter: parseTime,
 	},
 	{
-		prop: 'attrName',
-		label: '属性名',
+		prop: 'materialName',
+		label: '物料名称',
 	},
 	{
-		prop: 'attrValue',
-		label: '属性值',
+		prop: 'materialCode',
+		label: '物料编码',
 	},
+	{
+		prop: 'unit',
+		label: '单位',
+		filter: publicFormatter('unit_dict'),
+	},
+	{
+		prop: 'num',
+		label: '数量',
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+	}
 ];

 export default {
 	mixins: [basicAdd],
-	components: { SmallTitle },
+	components: { SmallTitle, attrAdd },
 	data() {
 		return {
 			tableBtn,
@@ -235,7 +182,6 @@ export default {
 			},
 			productList: [],
 			materialAttrList: [],
-			materialList: [],
 			tableData: [],
 			unitList: [],
 			visible: false,
@@ -250,13 +196,42 @@ export default {
 		this.getDict()
 	},
 	methods: {
+		handleClick(raw) {
+			if (raw.type === 'delete') {
+				this.deleteDetail(raw.data);
+			} else {
+				this.addNew(raw.data.id);
+			}
+		},
+		// 表单提交
+    dataFormSubmit() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        // 修改的提交
+        if (this.dataForm.id) {
+          this.urlOptions.updateURL(this.dataForm).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.visible = false; 
+            this.$emit("refreshDataList");
+          });
+          return;
+        }
+        // 添加的提交
+        this.urlOptions.createURL(this.dataForm).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          // this.visible = false;
+					this.idAttrShow = true;
+					this.dataForm.id = response.data
+          this.$emit("refreshDataList");
+        });
+      });
+    },
 		async getDict() {
 			// 产品列表
 			const proRes = await getProList();
 			this.productList = proRes.data;
-			// 物料列表
-			const res = await getMaterialList();
-			this.materialList = res.data;
 			// 物料单位列表
 			const unitRes = await listData({
 				pageNo: 1,
@@ -276,8 +251,7 @@ export default {
 		},
 		deleteDetail(raw) {
 			this.$confirm(
-				`确定删除关于物料编码为${
-					raw.materialCode}的数据?`,
+				`是否确认删除物料名称为"${raw.materialName}"的数据项?`,
 				'提示',
 				{
 					confirmButtonText: '确定',
@@ -299,88 +273,13 @@ export default {
 				})
 				.catch(() => {});
 		},
-		changeNum(row) {
-			if (row.num !== '') {
-				row.isNum = false
-			} else {
-				row.isNum = true
-			}
-		},
-		setCode(row) {
-			if (row.materialId) {
-				row.isShow = false
-				const tempM = this.materialList.filter(item => {
-					if (row.materialId === item.id) {
-						row.materialCode = item.code
-					}
-					return row.materialId === item.id
-				})
-				if (tempM[0].unit) {
-					this.unitList.filter(u => {
-						if (tempM[0].unit === u.value) {
-							row.unit = u.value
-							row.mUnit = u.label
-						}
-					})
-				} else {
-					row.unit = null
-					row.mUnit = ''
-				}
-			} else {
-				row.isShow = true
-				row.unit = null
-				row.mUnit = ''
-			}
-			// row.materialCode = tempList[0].code
-			// row.unit = tempList[0].unit
-		},
-		edit(row) {
-			row.isEdit = true
-		},
-		saveData(row) {
-			if (row.materialId) {
-			// this.$refs['dataForm'].validate((valid) => {
-				// if (valid) {
-				// 	修改的提交
-				if (row.id) {
-					updateMaterialPBDet({
-						...row
-					}).then((response) => {
-						this.$modal.msgSuccess('修改成功');
-						// this.visible = false;
-						this.getList();
-					});
-					return;
-				}
-					// 添加的提交
-				createMaterialPBDet({
-					...row
-				}).then((response) => {
-					this.$modal.msgSuccess('新增成功');
-					// this.visible = false;
-					this.getList();
-				});
-			} else {
-				this.$message.warning('请选择物料！')
-			}
-				// }
-			// });
-		},
 		getList() {
 			// 获取产品Bom详细列表
 			getProBomList({
 				...this.listQuery,
 				bomId: this.dataForm.id
 			}).then((response) => {
-				this.tableData = response.data.records.map(item => {
-					this.unitList.filter(u => {
-						if (item.unit === u.value) {
-							item.mUnit = u.label
-						}
-					})
-					item.isEdit = false
-					return item
-				});
+				this.tableData = response.data.records
 				this.listQuery.total = response.data.total;
 			});
 		},
@@ -476,7 +375,7 @@ export default {

 .drawer >>> .visual-part {
 	flex: 1 auto;
-	max-height: 30vh;
+	max-height: 20vh;
 	overflow: hidden;
 	overflow-y: scroll;
 	padding-right: 10px; /* 调整滚动条样式 */
@@ -492,4 +391,12 @@ export default {
 	justify-content: flex-end;
 	padding: 18px;
 }
+.action_btn {
+  float: right;
+  margin: -40px 15px;
+  font-size: 14px;
+}
+.add {
+	color: #0b58ff;
+}
 </style>
--- a/src/views/base/materialProductBom/attr-add.vue
+++ b/src/views/base/materialProductBom/attr-add.vue
@@ -0,0 +1,197 @@
+<template>
+	<el-dialog
+		:visible.sync="visible"
+		:width="'40%'"
+		:append-to-body="true"
+		:close-on-click-modal="false"
+		class="dialog">
+		<template #title>
+			<slot name="title">
+				<div class="titleStyle">
+					{{ !dataForm.id ? '新增' : '编辑' }}
+				</div>
+			</slot>
+		</template>
+
+		<el-form
+			ref="dataForm"
+			:model="dataForm"
+			:rules="dataRule"
+			label-width="80px"
+			@keyup.enter.native="dataFormSubmit()">
+			<el-row :gutter="20">
+				<el-col :span="12">
+					<el-form-item label="物料名称" prop="materialId">
+						<el-select
+							v-model="dataForm.materialId"
+							placeholder="请选择物料"
+							clearable
+							filterable
+							@change="setCode"
+							style="width: 100%"
+						>
+							<el-option
+								v-for="dict in materialList"
+								:key="dict.id"
+								:label="dict.name"
+								:value="dict.id" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="物料编码" prop="materialCode">
+						<el-input
+							v-model="dataForm.materialCode"
+							clearable
+							disabled
+							placeholder="请输入物料编码" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-row :gutter="20">
+				<el-col :span="12">
+					<el-form-item label="单位" prop="unit">
+						<el-select
+							v-model="dataForm.unit"
+							style="width: 100%"
+							disabled
+							placeholder="请选择单位">
+							<el-option
+								v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)"
+								:key="dict.value"
+								:label="dict.label"
+								:value="dict.value" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="数量" prop="num">
+					<el-input-number v-model="dataForm.num" controls-position="right" clearable placeholder="请输入数量" style="width: 100%" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-form-item label="备注" prop="remark">
+				<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
+			</el-form-item>
+		</el-form>
+
+		<el-row style="text-align: right">
+			<el-button @click="visible = false">取消</el-button>
+			<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+		</el-row>
+	</el-dialog>
+</template>
+
+<script>
+import { getMaterialList } from '@/api/base/material';
+import { createMaterialPBDet, updateMaterialPBDet, getMaterialPBDet } from "@/api/base/materialProductBom";
+
+export default {
+	props: {
+		bomId: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			visible: false,
+			dataForm: {
+				id: undefined,
+				materialId: '',
+				num: 0,
+				materialCode: undefined,
+				unit: undefined,
+				remark: '',
+			},
+			materialList: [],
+			dataRule: {
+				materialId: [{ required: true, message: '物料名称不能为空', trigger: 'change' }],
+				num: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
+			},
+		};
+	},
+	mounted() {
+		this.getDict()
+	},
+	methods: {
+		async getDict() {
+			// 物料列表
+			const res = await getMaterialList();
+			this.materialList = res.data;
+		},
+		init(id) {
+			this.dataForm.id = id || '';
+			this.visible = true;
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields();
+				if (this.dataForm.id) {
+					getMaterialPBDet(this.dataForm.id).then((res) => {
+						this.dataForm = res.data
+						this.setCode()
+					});
+				}
+			});
+		},
+		setCode() {
+			const tempMaterial = this.materialList.filter(item =>{
+				return item.id === this.dataForm.materialId
+			})
+			this.dataForm.materialCode = tempMaterial[0]?.code
+			this.dataForm.unit = tempMaterial[0].unit === undefined ? undefined : String(tempMaterial[0]?.unit)
+		},
+		// 表单提交
+		dataFormSubmit() {
+			this.$refs['dataForm'].validate((valid) => {
+				if (valid) {
+					// 修改的提交
+					if (this.dataForm.id) {
+						updateMaterialPBDet({
+							...this.dataForm,
+							bomId: this.bomId,
+						}).then((response) => {
+							this.$modal.msgSuccess('修改成功');
+							this.visible = false;
+							this.$emit('refreshDataList');
+						});
+						return;
+					}
+					// 添加的提交
+					createMaterialPBDet({
+						...this.dataForm,
+						bomId: this.bomId,
+					}).then((response) => {
+						this.$modal.msgSuccess('新增成功');
+						this.visible = false;
+						this.$emit('refreshDataList');
+					});
+				}
+			});
+		},
+	},
+};
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog__body {
+	padding: 30px 24px;
+}
+.dialog >>> .el-dialog__header {
+	font-size: 16px;
+	color: rgba(0, 0, 0, 0.85);
+	font-weight: 500;
+	padding: 13px 24px;
+	border-bottom: 1px solid #e9e9e9;
+}
+.dialog >>> .el-dialog__header .titleStyle::before {
+	content: '';
+	display: inline-block;
+	width: 4px;
+	height: 16px;
+	background-color: #0b58ff;
+	border-radius: 1px;
+	margin-right: 8px;
+	position: relative;
+	top: 2px;
+}
+</style>
--- a/src/views/base/materialProductBom/index.vue
+++ b/src/views/base/materialProductBom/index.vue
@@ -13,7 +13,7 @@
 			<method-btn
 				v-if="tableBtn.length"
 				slot="handleBtn"
-				:width="220"
+				:width="120"
 				label="操作"
 				:method-list="tableBtn"
 				@clickBtn="handleClick" />
@@ -68,24 +68,24 @@ export default {
 			},
 			tableProps,
 			tableBtn: [
-				this.$auth.hasPermi(`base:material-product-bom:update`)
+				this.$auth.hasPermi(`base:material-product-bom:queryMaterial`)
+					? {
+							type: 'detail',
+							btnName: '查看物料',
+					  }
+					: undefined,
+					this.$auth.hasPermi(`base:material-product-bom:update`)
 					? {
 							type: 'edit',
 							btnName: '编辑',
 					  }
 					: undefined,
-					this.$auth.hasPermi(`base:material-product-bom:queryMaterial`)
-					? {
-							type: 'search',
-							btnName: '查看物料',
-					  }
-					: undefined,
-					this.$auth.hasPermi(`base:material-product-bom:editMaterial`)
-					? {
-							type: 'editMaterial',
-							btnName: '编辑物料',
-					  }
-					: undefined,
+					// this.$auth.hasPermi(`base:material-product-bom:editMaterial`)
+					// ? {
+					// 		type: 'editMaterial',
+					// 		btnName: '编辑物料',
+					//   }
+					// : undefined,
          this.$auth.hasPermi(`base:material-product-bom:delete`)
 					? {
 							type: 'delete',
@@ -123,7 +123,7 @@ export default {
 	created() {},
 	methods: {
 		otherMethods(val) {
-			if (val.type === 'search') {
+			if (val.type === 'detail') {
 				this.addOrUpdateVisible = true;
 				this.addOrEditTitle = '详情';
 				this.$nextTick(() => {