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>