弹窗和部分页面调整

ybf_admin/src/pages/in/contact/components/addCounter.vue

 <template>
   <div class="ct">
     <el-dialog
-      :visible.sync="moveDialog"
+      :visible.sync="counterDialog"
       width="65%"
       :show-close="false"
-      :close-on-click-modal="false"
+      :before-close="handleClose"
     >
       <div class="choose">
         <div class="title">
@@ -14,7 +14,13 @@
           </div>
         </div>
         <div class="br">
-          <el-form class="searchzone" :model="formData" label-width="auto" ref="counterForm" :rules = "rules" >
+          <el-form
+            class="searchzone"
+            :model="formData"
+            label-width="auto"
+            ref="addCounter"
+            :rules="rules"
+          >
             <el-form-item label="柜组名称:" prop="name">
               <el-input
                 size="small"
@@ -55,8 +61,7 @@
               />
             </el-form-item>
             <div class="cs">
-              <el-form-item label="门店:">
-              </el-form-item>
+              <el-form-item label="门店:"> </el-form-item>
               <div>
                 <el-transfer
                   style="text-align: left; display: inline-block"
@@ -78,8 +83,8 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCancel" size="small">取 消</el-button>
-        <el-button type="primary" @click="handleFinish" size="small"
+        <el-button @click="handleCancel('addCounter')" size="small">取 消</el-button>
+        <el-button type="primary" @click="handleFinish('addCounter')" size="small"
           >确 定</el-button
         >
       </span>
@@ -89,12 +94,6 @@
 
 <script>
 export default {
-  props: {
-    moveDialog: {
-      type: Boolean,
-      default: false
-    }
-  },
   data() {
     const generateData = _ => {
       const data = [];
@@ -107,6 +106,7 @@ export default {
       return data;
     };
     return {
+      counterDialog: false,
       data: generateData(),
       value: [1],
       value4: [1],
@@ -133,27 +133,46 @@ export default {
         }
       ],
       rules: {
-          name: [
-            { required: true, message: '请输入柜组名称', trigger: 'blur' },
-          ],
-          people: [
-            { required: true, message: '请选择活动负责人', trigger: 'change' }
-          ]
-        }
+        name: [{ required: true, message: "请输入柜组名称", trigger: "blur" }],
+        people: [
+          { required: true, message: "请选择活动负责人", trigger: "change" }
+        ]
+      }
     };
   },
   methods: {
-    handleCancel() {
-      this.$emit("handleCancel");
+    handleChange() {},
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then(_ => {
+          this.counterDialog = false;
+        })
+        .catch(_ => {});
     },
-    handleFinish() {
-      this.$emit("handleFinish", false);
+    handleCancel(formName) {
+      this.$refs[formName].resetFields();
+      this.counterDialog = false;
     },
-    handleChange() {},
-    handleClose() {
-      this.$emit("handleCancel");
+    handleFinish(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.counterDialog = false;
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+   watch:{
+      counterDialog(){
+        if(this.counterDialog){
+          if(this.$refs.addCounter){
+            this.$refs.addCounter.resetFields();
+          }
+        }
+      }
     }
-  }
 };
 </script>
 
@@ -167,7 +186,6 @@ export default {
   font-weight: bold;
   color: rgba(56, 56, 56, 1);
   box-sizing: border-box;
-  margin-bottom: 20px;
 }
 .title {
   display: flex;

ybf_admin/src/pages/in/contact/components/addStore.vue

 <template>
   <div class="ct">
     <el-dialog
-      :visible.sync="moveDialog"
+      :visible.sync="addStoreDialog"
       width="65%"
       :show-close="false"
-      :close-on-click-modal="false"
+     :before-close="handleClose"
     >
       <div class="choose">
         <div class="title">
@@ -18,7 +18,7 @@
             class="searchzone"
             :model="formData"
             label-width="auto"
-            ref="counterForm"
+            ref="addStore"
             :rules="rules"
           >
             <el-form-item label="柜组名称:" prop="name">
@@ -93,7 +93,7 @@
             <div class="cs">
               <el-form-item label="绑定店员:">
               </el-form-item>
-              <div>
+              <div style="display:inline-block;">
                 <el-transfer
                   style="text-align: left; display: inline-block"
                   v-model="value4"
@@ -111,14 +111,11 @@
               </div>
             </div>
           </el-form>
-          
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCancel" size="small">取 消</el-button>
-        <el-button type="primary" @click="handleFinish" size="small"
-          >确 定</el-button
-        >
+        <el-button @click="handleCancel('addStore')" size="small">取 消</el-button>
+        <el-button type="primary" @click="handleFinish('addStore')" size="small">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -126,12 +123,6 @@
 
 <script>
 export default {
-  props: {
-    moveDialog: {
-      type: Boolean,
-      default: false
-    }
-  },
   data() {
     const generateData = _ => {
       const data = [];
@@ -145,6 +136,7 @@ export default {
       return data;
     };
     return {
+      addStoreDialog: false,
       data: generateData(),
         value: [1],
         value4: [1],
@@ -181,17 +173,39 @@ export default {
     };
   },
   methods: {
-    handleCancel() {
-      this.$emit("handleCancel");
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          this.addStoreDialog = false
+        })
+        .catch(_ => {});
     },
-    handleFinish() {
-      this.$emit("handleFinish", false);
+    handleCancel(formName) {
+      this.$refs[formName].resetFields();
+      this.addStoreDialog = false
+    },
+    handleFinish(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.addStoreDialog = false
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
     },
     handleChange() {},
-    handleClose() {
-      this.$emit("handleCancel");
+
+  },
+  watch:{
+      addStoreDialog(){
+        if(this.addStoreDialog){
+          if(this.$refs.addStore){
+            this.$refs.addStore.resetFields();
+          }
+        }
+      }
     }
-  }
 };
 </script>
 
@@ -202,7 +216,6 @@ export default {
   font-weight: bold;
   color: rgba(56, 56, 56, 1);
   box-sizing: border-box;
-  margin-bottom: 20px;
 }
 .title {
   display: flex;

ybf_admin/src/pages/in/contact/components/counterDetail.vue

 <template>
   <div class="ct">
     <el-dialog
-      :visible.sync="moveDialog"
+      :visible.sync="detailDialog"
       width="65%"
       :show-close="false"
-      :close-on-click-modal="false"
     >
       <div class="choose">
         <div class="title">
-          <div class="cg">选择分组</div>
+          <div class="cg">柜组详情</div>
           <div class="circle" @click="handleClose">
             <d2-icon-svg name="close" class="icon" />
           </div>
@@ -51,7 +50,8 @@
                 placeholder="请输入所在区域"
               />
             </el-form-item>
-            <el-form-item label="门店:">
+            <div class="tb">
+              <el-form-item label="门店:"> </el-form-item>
               <el-table
                 stripe
                 class="list"
@@ -59,9 +59,12 @@
                 :data="tableData"
                 tooltip-effect="dark"
                 style="width: 100%"
-                height="calc(100% - 120px)"
               >
-                <el-table-column type="index" label="序号" width="60"></el-table-column>
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="60"
+                ></el-table-column>
                 <el-table-column
                   prop="taskName"
                   label="柜组名称"
@@ -73,22 +76,15 @@
                   align="center"
                 ></el-table-column>
               </el-table>
-            </el-form-item>
+            </div>
           </el-form>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCancel" size="small">取 消</el-button>
-        <el-button type="primary" @click="handleFinish" size="small"
-          >确 定</el-button
-        >
-      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-
 export default {
   props: {
     moveDialog: {
@@ -98,6 +94,7 @@ export default {
   },
   data() {
     return {
+      detailDialog: false,
       formData: {
         name: "",
         code: "",
@@ -117,39 +114,32 @@ export default {
     };
   },
   methods: {
-    handleCancel() {
-      this.$emit("handleCancel");
-    },
-    handleFinish() {
-      this.$emit("handleFinish", false);
-    },
-    handleChange() {},
     handleClose() {
-      this.$emit("handleCancel");
+      this.detailDialog = false
+    }
+  },
+  watch:{
+
     }
-  }
 };
 </script>
-<style >
-/* .table >>> .el-table td, .el-table th {
-  padding: 0 !important;
-} */
+<style>
 </style>
 <style scoped>
-
+.tb {
+  display: flex;
+}
 .choose {
   padding: 16px;
   font-size: 16px;
   font-weight: bold;
   color: rgba(56, 56, 56, 1);
   box-sizing: border-box;
-  margin-bottom: 20px;
 }
 .title {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  /* border-bottom: 1px solid #f8f8f8; */
   padding-bottom: 10px;
 }
 .transfer-footer {

ybf_admin/src/pages/in/contact/components/history.vue

@@ -154,7 +154,10 @@ export default {
   color:rgba(102,102,102,1);
 }
 .main {
-  height: 100vh;
+  position: relative;
+  background-color: #fff;
+  box-sizing: border-box;
+  height: 100%;
   padding: 0px 16px 16px;
   display: flex;
   flex-direction: column;
@@ -217,8 +220,6 @@ export default {
 }
 .title {
   height: 48px;
-  font-size: 16px;
-  font-weight: bold;
   display: flex;
   justify-content: space-between;
   align-items: center;

ybf_admin/src/pages/in/contact/components/move.vue

@@ -96,7 +96,6 @@ export default {
   font-weight: bold;
   color: rgba(56, 56, 56, 1);
   box-sizing: border-box;
-  margin-bottom: 20px;
 }
 .title {
   display: flex;

ybf_admin/src/pages/in/contact/components/storeDetail.vue

 <template>
   <div class="ct">
     <el-dialog
-      :visible.sync="moveDialog"
+      :visible.sync="detailDialog"
       width="65%"
       :show-close="false"
-      :close-on-click-modal="false"
     >
       <div class="choose">
         <div class="title">
@@ -14,8 +13,13 @@
           </div>
         </div>
         <div class="br">
-          <el-form class="searchzone" :model="formData" label-width="auto" ref="counterForm"  disabled >
-            <el-form-item label="柜组名称:" >
+          <el-form
+            class="searchzone"
+            :model="formData"
+            label-width="auto"
+            disabled
+          >
+            <el-form-item label="柜组名称:">
               <el-input
                 size="small"
                 v-model="formData.name"
@@ -38,7 +42,7 @@
                 ></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="所属柜组:" >
+            <el-form-item label="所属柜组:">
               <el-select
                 size="small"
                 v-model="formData.counter"
@@ -53,7 +57,7 @@
                 ></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="柜组负责人:" >
+            <el-form-item label="柜组负责人:">
               <el-select
                 size="small"
                 v-model="formData.people"
@@ -84,7 +88,8 @@
                 placeholder="请输入位置"
               />
             </el-form-item>
-            <el-form-item label="绑定店员:">
+            <div class="tb">
+              <el-form-item label="绑定店员:"> </el-form-item>
               <el-table
                 stripe
                 class="list"
@@ -92,9 +97,12 @@
                 :data="tableData"
                 tooltip-effect="dark"
                 style="width: 100%"
-                height="calc(100% - 120px)"
               >
-                <el-table-column type="index" label="序号" width="60"></el-table-column>
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="60"
+                ></el-table-column>
                 <el-table-column
                   prop="taskName"
                   label="门店名称"
@@ -106,51 +114,18 @@
                   align="center"
                 ></el-table-column>
               </el-table>
-            </el-form-item>
+            </div>
           </el-form>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCancel" size="small">取 消</el-button>
-        <el-button type="primary" @click="handleFinish" size="small"
-          >确 定</el-button
-        >
-      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    moveDialog: {
-      type: Boolean,
-      default: false
-    },
-    tableData: []
-  },
   data() {
-    const generateData = _ => {
-      const data = [];
-      for (let i = 1; i <= 15; i++) {
-        data.push({
-          key: i,
-          label: `备选项 ${i}`
-        });
-      }
-      return data;
-    };
     return {
-      data: generateData(),
-      value: [1],
-      value4: [1],
-      renderFunc(h, option) {
-        return (
-          <span>
-            {option.key} - {option.label}
-          </span>
-        );
-      },
       formData: {
         name: "",
         code: "",
@@ -169,32 +144,28 @@ export default {
           name: "李四"
         }
       ],
-      tableData: []
+      tableData: [],
+      detailDialog: false
     };
   },
   methods: {
-    handleCancel() {
-      this.$emit("handleCancel")
-    },
-    handleFinish() {
-      this.$emit("handleFinish", false)
-    },
-    handleChange() {},
     handleClose() {
-      this.$emit("handleCancel");
+      this.detailDialog = false
     }
   }
 };
 </script>
 
 <style scoped>
+.tb {
+  display: flex;
+}
 .choose {
   padding: 16px;
   font-size: 16px;
   font-weight: bold;
   color: rgba(56, 56, 56, 1);
   box-sizing: border-box;
-  margin-bottom: 20px;
 }
 .title {
   display: flex;

ybf_admin/src/pages/in/contact/counter.vue

@@ -99,8 +99,8 @@
         :total="400"
       ></el-pagination>
     </div>
-    <add-counter v-if="counterDialog" :moveDialog="counterDialog" @handleCancel="counterDialog = false" @handleFinish="addCounterFinish"></add-counter>
-    <counter-detail v-if="detailDialog" :moveDialog="detailDialog" @handleCancel="detailDialog = false" ></counter-detail>
+    <add-counter ref="addCounter"></add-counter>
+    <counter-detail ref="counterDetail" ></counter-detail>
   </div>
 </template>
 <script>
@@ -185,11 +185,12 @@ export default {
     pagesSizeChange() {},
     pagesNowPageChange() {},
     handleDetail() {
-      this.detailDialog = true
+      this.$refs.counterDetail.detailDialog = true
     },
     addCounter() {
-      this.counterDialog = true
+      this.$refs.addCounter.counterDialog= true
     },
+    
     addCounterFinish() {
       this.counterDialog = false
     }

ybf_admin/src/pages/in/contact/index.vue

@@ -57,9 +57,7 @@ export default {
     handleMenuChange (index) {
       this.index = index    
     },
-    contorlHistoryShow (val) {
-      console.log(val, "val");
-      
+    contorlHistoryShow (val) {      
       this.isHistoryShow = val
     }
   } 
@@ -94,8 +92,6 @@ export default {
   width: 100%;
   height: 100%;
   box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
-
-  /* box-shadow: 0px 4px 0px 0px rgba(221, 221, 221, 1); */
 }
 .tac >>> .el-menu {
   border-right: none;

ybf_admin/src/pages/in/contact/mail.vue

@@ -49,7 +49,7 @@
       </div>
       <div class="end">
         <span class="add-l" @click="addCounter">添加柜组</span>
-        <span class="add-r" @click="addDept">添加部门</span>
+        <span class="add-r" @click="addStore">添加门店/专柜</span>
       </div>
     </div>
     <div class="right">
@@ -143,8 +143,8 @@
       @handleCancel="moveDialogShow = false"
       @handleFinish="removeFinish"
     ></move-dialog>
-    <add-counter v-if="counterDialog" :moveDialog="counterDialog" @handleCancel="counterDialog = false" @handleFinish="addCounterFinish"></add-counter>
-    <add-store v-if="storeDialog" :moveDialog="storeDialog" @handleCancel="storeDialog = false" @handleFinish="addStoreFinish"></add-store>
+    <add-counter ref="addCounter"></add-counter>
+    <add-store ref="addStore"></add-store>
   </div>
 </template>
 
@@ -317,16 +317,10 @@ export default {
     },
     currentPage() {},
     addCounter() {
-      this.counterDialog = true
+      this.$refs.addCounter.counterDialog= true
     },
-    addCounterFinish() {
-      this.counterDialog = false
-    },
-    addDept() {
-      this.counterDialog = true
-    },
-    addStoreFinish() {
-      this.storeDialog = false
+    addStore() {
+      this.$refs.addStore.addStoreDialog = true
     }
   }
 };

ybf_admin/src/pages/in/contact/store.vue

@@ -108,8 +108,9 @@
         :total="400"
       ></el-pagination>
     </div>
-    <add-store v-if="storeDialog" :moveDialog="storeDialog" @handleCancel="storeDialog = false" @handleFinish="addStoreFinish"></add-store>
-    <store-detail v-if="detailDialog" :moveDialog="detailDialog" @handleCancel="detailDialog = false" ></store-detail>
+    <add-store ref="addStore"></add-store>
+    <store-detail  ref="storeDetail" ></store-detail>
+
   </div>
 </template>
 <script>
@@ -214,9 +215,7 @@ export default {
         page: {
           nowPageNum: 4
         }
-      },
-      storeDialog: false,
-      detailDialog: false
+      }
     };
   },
   created() {},
@@ -229,17 +228,14 @@ export default {
       if (rowIndex === 0) {
         return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
       } else {
-        return "";
+        return ""
       }
     },
     addStore() {
-      this.storeDialog = true
+      this.$refs.addStore.addStoreDialog = true
     },
     handleDetail() {
-      this.detailDialog = true
-    },
-    addStoreFinish() {
-      this.storeDialog = false
+      this.$refs.storeDetail.detailDialog = true
     }
   }
 };