外协商信息增删改查完善

src/views/business/supplier/form.vue

@@ -0,0 +1,106 @@
+<template>
+	<el-dialog title="供应商信息" height="400px" v-model="visible" width="500px" append-to-body draggable>
+		<div class="form-container">
+			<!-- 主表 -->
+			<el-form ref="formRef" class="master-container" :model="form" :rules="rules" label-width="120px">
+				<el-form-item label="供应商名称" prop="name">
+					<el-input v-model.trim="form.name" placeholder="供应商名称" />
+				</el-form-item>
+				<el-form-item label="助记码" prop="mnemonicCode">
+					<el-input v-model.trim="form.mnemonicCode" placeholder="请输入料号" />
+				</el-form-item>
+				<el-form-item label="发货方式" prop="deliveryMethod">
+					<el-select v-model="form.deliveryMethod" placeholder="请选择产品状态">
+						<el-option v-for="dict in deliveryMethod" :key="dict.value" :label="dict.label" :value="dict.value - 0" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="损耗上限(%)" prop="lossLimit">
+					<el-input-number v-model="form.lossLimit" :min="0" :precision="2" controls-position="right" />
+				</el-form-item>
+				<el-form-item label="备注" prop="remark">
+					<el-input v-model.trim="form.remark" placeholder="请输入备注" />
+				</el-form-item>
+			</el-form>
+		</div>
+		<template #footer>
+			<el-button type="primary" icon="Check" @click="handleSave">确 定</el-button>
+			<el-button icon="Close" @click="handleCancel">取 消</el-button>
+		</template>
+	</el-dialog>
+</template>
+<script setup>
+import { getInfo, save } from '@/api/business/supplier'
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['handleSaveSuccess'])
+const props = defineProps({
+	deliveryMethod: {
+		type: Array,
+		default: []
+	}
+})
+/** 产品表单变量 */
+const loading = ref(false)
+const visible = ref(false)
+const data = reactive({
+	form: {},
+	rules: {
+		name: [{ required: true, message: '供应商名称不能为空', trigger: 'blur' }]
+	}
+})
+const { form, rules } = toRefs(data)
+
+/***********************  方法区  ****************************/
+/** 打开抽屉 */
+function open(data) {
+	reset()
+	visible.value = true
+	loading.value = true
+	const id = data ? data.id : 0
+	getInfo(id).then((res) => {
+		if (res.data) {
+			form.value = res.data
+		}
+		loading.value = false
+	})
+}
+
+/** 取消按钮 */
+function handleCancel() {
+	visible.value = false
+	reset()
+}
+
+/** 表单重置 */
+function reset() {
+	form.value = {
+		id: null,
+		mnemonicCode: '',
+		deliveryMethod: '',
+		lossLimit: '',
+		remark: ''
+	}
+	proxy.resetForm('formRef')
+}
+
+/** 提交按钮 */
+function handleSave() {
+	proxy.$refs['formRef'].validate((valid) => {
+		if (valid) {
+			save(form.value).then((res) => {
+				if (res.code === 200) {
+					proxy.$modal.msgSuccess('操作成功')
+					emit('handleSaveSuccess')
+				} else {
+					proxy.$modal.msgWarn(res.msg)
+				}
+				visible.value = false
+			})
+		}
+	})
+}
+
+/** 暴露给父组件的方法 */
+defineExpose({
+	open
+})
+</script>

src/views/business/supplier/index.vue

@@ -26,6 +26,7 @@
 				</el-form-item>
 				<el-form-item>
 					<el-button type="info" icon="Search" @click="handleQuery">搜索</el-button>
+					<el-button type="primary" icon="Plus" @click="handleShowSupplierDialog(null)">添加</el-button>
 				</el-form-item>
 			</el-form>
 			<!-- 列表区 -->
@@ -42,13 +43,15 @@
 					>
 						<el-table-column type="index" label="行号" width="50" align="center" />
 						<el-table-column label="外协商名称" width="320" align="center" prop="name" />
-						<el-table-column label="助记码" width="120" align="center" prop="productDescription" />
+						<el-table-column label="助记码" width="120" align="center" prop="mnemonicCode" />
 						<el-table-column label="发货方式" width="80" align="center" prop="deliveryMethod">
 							<template #default="scope">
 								<dict-tag :options="delivery_method" :value="scope.row.deliveryMethod" />
 							</template>
 						</el-table-column>
-						<el-table-column label="损耗上限" width="80" align="center" prop="lossLimit" />
+						<el-table-column label="损耗上限" width="80" align="center" prop="lossLimit">
+							<template #default="scope"> {{ scope.row.lossLimit }}% </template>
+						</el-table-column>
 						<el-table-column label="备注" align="center" prop="remark" />
 						<el-table-column label="操作" width="132" align="center">
 							<template #default="scope">
@@ -57,17 +60,19 @@
 									link
 									type="warning"
 									icon="Edit"
-									@click="handleEdit(scope.row)"
-									>编辑</el-button
+									@click="handleShowSupplierDialog(scope.row)"
 								>
+									编辑
+								</el-button>
 								<el-button
 									v-hasPermi="['system:supplier:remove']"
 									link
 									type="danger"
 									icon="Delete"
 									@click="handleDelete(scope.row)"
-									>删除</el-button
 								>
+									删除
+								</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -105,8 +110,9 @@
 							icon="Plus"
 							@click="handleShowProductsDialog(null)"
 							:disabled="!currentSupplier.id"
-							>添加产品</el-button
 						>
+							添加产品
+						</el-button>
 					</el-form-item>
 				</el-form>
 				<div class="el-table-container">
@@ -207,7 +213,7 @@
 										:step="0.00000001"
 										controls-position="right"
 									/>
-									<span v-else>{{ scope.row.price }}</span>
+									<span v-else>{{ scope.row.priceLabel }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="备注" align="center" prop="remark">
@@ -226,8 +232,11 @@
 				</div>
 			</section>
 		</section>
-
+		<!-- 供应商表单 -->
+		<dialog-form ref="formRef" @handleSaveSuccess="handleQuery" :delivery-method="delivery_method" />
+		<!-- 产品添加对话框 -->
 		<dialog-products ref="productsRef" :supplier-id="currentSupplier.id" :multiple-selected="handleProductSelected" />
+		<!-- 工序添加对话框 -->
 		<dialog-processes
 			ref="processesRef"
 			:product-id="currentProduct.productId"
@@ -248,6 +257,7 @@ import {
 	saveSupplierProductProcess,
 	removeSupplierProductProcess
 } from '@/api/business/supplier'
+import dialogForm from './form'
 import dialogProducts from './DialogProducts'
 import dialogProcesses from './DialogProcesses'
 const { proxy } = getCurrentInstance()
@@ -312,6 +322,11 @@ const handleQuery = () => {
 	getList()
 }
 
+/** 打开供应商对话框 **/
+const handleShowSupplierDialog = (data) => {
+	proxy.$refs.formRef.open(data)
+}
+
 /**
  * 外协商的 current change 事件
  */
@@ -322,6 +337,20 @@ const handleCurrentSupplierChange = (row) => {
 	}
 }
 
+const handleDelete = (row) => {
+	proxy.$modal
+		.confirm('确认删除数据项？')
+		.then(() => {
+			remove(row.id).then((res) => {
+				if (res.code === 200) {
+					proxy.$modal.msgSuccess('删除成功！')
+					getList()
+				}
+			})
+		})
+		.catch(() => {})
+}
+
 /**************************************** 产品相关 ****************************************/
 /** 产品打开对话框方法 */
 const handleShowProductsDialog = () => {