<template> <div class="ct"> <el-dialog :visible.sync="addStoreDialog" class="dialog" width="65%" :show-close="false" :before-close="handleClose" > <div class="choose"> <div class="title"> <div class="cg">添加门店</div> <div class="circle" @click="handleClose"> <d2-icon-svg name="close" class="icon" /> </div> </div> <div class="br"> <!-- <el-form :model="zdata.post" label-width="auto" ref="addStore" :rules="zrule"> --> <el-form :model="zdata.post" label-width="auto" ref="addStore"> <!-- <el-form :model="zdata.post" label-width="auto" ref="createForm" :rules="rules"> --> <el-form-item label="门店名称:" prop="storeName"> <el-input size="small" v-model="zdata.post.storeName" style="width:240px;" placeholder="请输入门店名称" /> </el-form-item> <el-form-item label="门店类型:" prop="storeType"> <el-select size="small" v-model="zdata.post.storeTypeId" placeholder="请选择门店类型" style="width:240px" > <el-option v-for="item in zlist.storeType" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="门店负责人:" prop="people"> <el-select size="small" v-model="zdata.post.storeBossId" placeholder="请选择门店负责人" style="width:240px" > <el-option v-for="item in zlist.storeBossId" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="所属柜组:" prop="counter"> <el-select size="small" v-model="zdata.post.storeFromBarId" placeholder="请选择所属柜组" style="width:240px" > <el-option v-for="item in zlist.storeFromBarId" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="门牌号:" prop="number"> <el-input size="small" v-model="zdata.post.storeDoorCode" style="width:240px" placeholder="请输入门牌号" /> </el-form-item> <el-form-item label="位置:" prop="area"> <el-input size="small" v-model="zdata.post.storeAddress" style="width:240px" placeholder="请输入位置" /> </el-form-item> </el-form> </div> </div> <span slot="footer" class="dialog-footer"> <el-button @click="handleCancel('addStore')" size="small">取 消</el-button> <!-- <el-button type="primary" @click="addStoreSubmit('createForm')" size="small">确 定</el-button> --> <el-button type="primary" @click="addStoreSubmit" size="small">确 定</el-button> </span> </el-dialog> </div> </template> <script> import { ApiStoreAddStore } from "@api/in/store"; const zlog = console.log.bind(console); export default { data() { // 中英文验证规则 const nameValidate = (rule, value, callback) => { let reg = /^[a-zA-Z\u4e00-\u9fa5]+$/; if (!reg.test(value)) { callback(new Error("含有非法字符(只能输入字母、汉字)!")); } else { callback(); } }; return { zlist: { storeType: [ { id: "0", name: "普通" }, { id: "1", name: "专柜" } ], storeBossId: [ { id: "2001200138020920001", name: "王月云" }, { id: "2001200138020930002", name: "李强" } ], storeFromBarId: [ { id: "2001201134572130000", name: "柜组一号" }, { id: "2001201135500920000", name: "柜组二号" } ] }, zdata: { post: { storeName: "", storeTypeId: "", storeBossId: "", storeFromBarId: "", storeDoorCode: "", storeAddress: "" } }, rules: { // name: [ // { required: true, message: "请输入柜组名称F", trigger: "blur" }, // { validator: nameValidate, trigger: "blur" }, // { max: 50, message: "长度在50个字符以内", trigger: "blur" } // ], type: [{ required: true, message: "请选择门店类型", trigger: "change" }] // people: [ // { required: true, message: "请选择门店负责人", trigger: "change" } // ], // counter: [ // { required: true, message: "请选择所属柜组", trigger: "change" } // ], // number: [{ max: 50, message: "长度在50个字符以内", trigger: "blur" }], // area: [{ max: 50, message: "长度在100个字符以内", trigger: "blur" }] }, addStoreDialog: false }; }, methods: { handleClose(done) { this.$confirm("确认关闭?") .then(_ => { this.addStoreDialog = false; }) .catch(_ => {}); }, handleCancel(formName) { this.$refs[formName].resetFields(); this.addStoreDialog = false; }, addStoreSubmit(inDataName = "") { let postData = { name: this.zdata.post.storeName, stallType: Number(this.zdata.post.storeTypeId), principal: Number(this.zdata.post.storeBossId), shopId: this.zdata.post.storeFromBarId, signNum: this.zdata.post.storeDoorCode, location: this.zdata.post.storeAddress, }; console.log("--->postData =", postData); ApiStoreAddStore(postData) .then(res => { if (res.result == "success") { this.$message({ message: "添加成功", type: "success" }); this.addStoreDialog = false; } }) .catch(err => { }); }, handleChange() {} }, watch: { addStoreDialog() { if (this.addStoreDialog) { if (this.$refs.addStore) { this.$refs.addStore.resetFields(); } } } } }; </script> <style scoped> .choose { padding: 16px; font-size: 16px; font-weight: bold; color: rgba(56, 56, 56, 1); box-sizing: border-box; } .title { display: flex; align-items: center; justify-content: space-between; /* border-bottom: 1px solid #f8f8f8; */ padding-bottom: 10px; } .transfer-footer { margin-left: 20px; padding: 6px 5px; } .ct >>> .el-dialog__header { padding: 0 !important; } .ct >>> .el-dialog__body { padding: 0; } .ct >>> .el-transfer-panel { width: 180px; } .circle { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; border: 1px solid rgba(208, 2, 27, 1); position: relative; } .circle >>> .icon { width: 28px; height: 28px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .br { border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; padding: 24px 60px; /* border: 2px solid red; */ } .cs { display: flex; } </style>