增加修改花材分类的弹窗

hd/src/config/env.js

@@ -7,7 +7,7 @@ const env = process.env;
 const routerMode = 'hash';
 
 // 图片host
-const imgHostUrl = `${window.location.protocol}//img.${getFirstHost()}.com`;
+const imgHostUrl = `${window.location.protocol}//img.${getFirstHost()}.com/`;
 
 // 请求地址
 const baseUrl = (() => {

hd/src/views/item/list.vue

@@ -72,6 +72,16 @@
           >完成</el-button>
         </div>
       </template>
+
+       <template #slot-modify="{ scope }">
+				<el-button
+					type="text"
+					@click.native.stop="replaceBtnFn"
+					>修改</el-button
+				>
+			</template>
+
+
       <template
         #slot-add-goods-btn
       >
@@ -90,6 +100,100 @@
       @cancel="showItemModal = false"
     ></item-list-layer>
 
+<!-- 新增弹窗 -->
+		<el-dialog
+			title="修改花材"
+			:visible.sync="addDialog"
+			:close-on-click-modal="false"
+			width="600px"
+		>
+      <div class="ad-modal-content">
+        <el-form
+					:model="replaceForm"
+					:rules="replaceFormRules"
+					ref="replaceForm"
+					label-width="100px"
+					class="demo-form"
+				>
+
+        <el-form-item label="名称" prop="name">
+						<el-input
+							v-model="replaceForm.name"
+							placeholder="请输入名称"
+							size="small"
+						></el-input>
+					</el-form-item>
+
+          <el-form-item label="别名" prop="alias">
+						<el-input
+							v-model="replaceForm.alias"
+							placeholder="请输入别名"
+							size="small"
+						></el-input>
+					</el-form-item>
+
+          <el-form-item label="图片" prop="cover">
+						<cl-upload v-model="replaceForm.cover" :success="uploadSuccess"></cl-upload>
+						<p style="font-size: 14px; color: #cccccc">建议上传图片比例 400X400</p>
+					</el-form-item>
+
+          <el-form-item label="分类" prop="classId">
+						<el-select
+							v-model="replaceForm.className"
+							size="small"
+							placeholder="请选择分类"
+							@change="selClassFn"
+						>
+							<el-option
+								v-for="(item, index) in itemClassList"
+								:key="index"
+								:value="item.name"
+								>{{ item.name }}</el-option
+							>
+						</el-select>
+					</el-form-item>
+
+          <el-form-item label="库存预警" prop="stockWarning">
+						<el-input
+							v-model="replaceForm.stockWarning"
+							placeholder="请输入数值"
+							size="small"
+						></el-input>
+					</el-form-item>
+
+          <el-form-item label="每扎重量" prop="weight">
+						<el-input
+							v-model="replaceForm.weight"
+							placeholder="请输入斤数"
+							size="small"
+						></el-input>
+					</el-form-item>
+
+          <el-form-item label="每扎成本价" prop="cost">
+						<el-input
+							v-model="replaceForm.cost"
+							placeholder="请输入成本价"
+							size="small"
+						></el-input>
+					</el-form-item>
+
+          <el-form-item label="每扎加价" prop="addPrice">
+						<el-input
+							v-model="replaceForm.addPrice"
+							placeholder="请输入加价"
+							size="small"
+						></el-input>
+					</el-form-item>
+
+
+        </el-form>
+      </div>
+			<div slot="footer" class="dialog-footer">
+				<el-button size="small" @click="resetForm">取 消</el-button>
+				<el-button type="primary" size="small" @click="replaceConfirmFn">确认</el-button>
+			</div>
+		</el-dialog>
+
   </div>
 </template>
 <script>
@@ -120,11 +224,85 @@ export default {
       classId: 0,
       className:'',
       showItemModal: false,
+      initData: [],
+      addDialog: false,
+      replaceForm: {
+				name: '',
+				alias: '',
+				classId: '',
+				className: '',
+				cover: '',
+				bigUnit: '',
+				smallUnit: '',
+				stockWarning:'',
+				cost:'',
+				addPrice:'',
+				weight:'',
+			},
+      replaceFormRules: {
+				name: {
+					required: true,
+					message: '名称不能为空',
+				},
+				cover: {
+					required: true,
+					message: '图片不能为空',
+				},
+				classId: {
+					required: true,
+					message: '请选择分类',
+				},
+				stockWarning: {
+					required: true,
+					message: '最低库存不能为空',
+				},
+				cost: {
+					required: true,
+					message: '运费不能为空',
+				},
+				addPrice: {
+					required: true,
+					message: '加价不能为空',
+				},
+				weight: {
+					required: true,
+					message: '重量不能为空',
+				}
+			},
     };
   },
   computed: {
   },
   methods: {
+     getAllClass() {
+			if (!this.$util.isEmpty(this.itemClassList)) {
+				return this.itemClassList;
+			}
+			this.$service.itemClass.list().then((res) => {
+        console.log(res)
+				this.itemClassList = res.list;
+			});
+		},
+    uploadSuccess() {},
+    selClassFn(val) {
+			let index = this.itemClassList.findIndex((e) => e.name == val);
+			this.replaceForm.classId = this.itemClassList[index].id;
+		},
+    replaceConfirmFn() {
+      this.$refs.replaceForm.validate((valid) => {
+        if(valid) {
+          console.log(this.replaceForm)
+        }
+      })
+    },
+    uploadSuccess() {
+			console.log(this.$refs['replaceForm'].validateField('cover'))
+		},
+     resetForm() {
+			this.goodsData = {};
+			this.$refs['replaceForm'].resetFields();
+			this.addDialog = false;
+		},
     selGoodsConfirmFn (currentItem) {
 
       let item = currentItem.list
@@ -154,6 +332,10 @@ export default {
     tabClick (tab, e) {
       this.app.refresh({ classId: this.classId });
     },
+    replaceBtnFn() {
+      this.addDialog = true
+      this.getAllClass()
+    },
     onLoad ({ ctx, app }) {
 
       if (this.$route.query.classId) {
@@ -253,7 +435,7 @@ export default {
               fixed: 'right',
               label: '操作'
             },
-            layout: []
+            layout: ['slot-modify']
           }
         })
         .set('dict', {