From 8367dd9b9129539688d4421c3be557f3a9c02bf6 Mon Sep 17 00:00:00 2001
From: kevin jiang <kevin.jiang@kiisoo.com>
Date: Thu, 9 Apr 2020 17:06:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=A8=E5=BA=97=E6=8E=A8=E5=B9=BF-=E6=8E=A8?=
 =?UTF-8?q?=E5=B9=BF=E4=BA=BA=E5=91=98=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kiisoo-ic-ui/src/pages/Home.vue               |   2 +-
 .../src/pages/shop/IncreaseStaffManager.vue   | 149 +++++++++++++++++-
 .../src/pages/shop/IncreaseStoreManager.vue   |  27 +---
 3 files changed, 143 insertions(+), 35 deletions(-)

diff --git a/kiisoo-ic-ui/src/pages/Home.vue b/kiisoo-ic-ui/src/pages/Home.vue
index e125e3b..7379d84 100644
--- a/kiisoo-ic-ui/src/pages/Home.vue
+++ b/kiisoo-ic-ui/src/pages/Home.vue
@@ -8,7 +8,7 @@
           <span>拓客营销</span>
         </div>
 
-        <Menu active-name="3" theme="dark" width="auto" :class="menuitemClasses" @on-select="onSelectLister">
+        <Menu active-name="3" theme="dark" width="auto" :class="menuitemClasses" @on-select="onSelectLister" :accordion="true">
           <Submenu name="1">
             <template slot="title">
               <Icon type="ios-paper" />
diff --git a/kiisoo-ic-ui/src/pages/shop/IncreaseStaffManager.vue b/kiisoo-ic-ui/src/pages/shop/IncreaseStaffManager.vue
index bb65369..550ae35 100644
--- a/kiisoo-ic-ui/src/pages/shop/IncreaseStaffManager.vue
+++ b/kiisoo-ic-ui/src/pages/shop/IncreaseStaffManager.vue
@@ -25,7 +25,7 @@
                     <i-col span="12" style="text-align: right;padding-right: 20px;">
                         <Button type="primary" style="margin-right: 10px;">批量下载</Button>
                         <Button type="primary" style="margin-right: 10px;">批量添加</Button>
-                        <Button type="primary">添加推广人员</Button>
+                        <Button type="primary" @click="open(1)">添加推广人员</Button>
                     </i-col>
                 </Row>
             </i-col>
@@ -45,18 +45,105 @@
             </template>
 
             <template slot-scope="{ row, index }" slot="action">
-                <Button ghost type="primary" size="small" style="margin-right: 5px" @click="open(index)">开通门店企微号</Button>
-                <Button ghost type="error" size="small" @click="remove(index)">删除微信号</Button>
+                <Button ghost type="primary" size="small" style="margin-right: 5px" @click="open(2, index)">修改</Button>
+                <Button ghost type="error" size="small" @click="remove(index)">删除</Button>
             </template>
         </Table>
+
+        <!-- 预览二维码 -->
+        <Modal
+                v-model="isShow"
+                :title="showStoreName"
+                :footer-hide="true"
+                width="230"
+                class-name="vertical-center-modal"
+                >
+            <div slot="header">{{this.showStoreName}}</div>
+            <img :src="qrCodeImage" style="width:200px;height:200px;"/>
+            <div style="text-align: center;">
+                <Button ghost type="primary">下载</Button>
+            </div>
+        </Modal>
+
+        <!-- 添加推广人员 -->
+        <Modal
+                v-model="isShowAdd"
+                :footer-hide="true"
+               >
+            <div slot="header">
+                <template v-if="flag === 1">
+                    <span>添加推广人员</span>
+                </template>
+                <template v-else>
+                    <span>修改推广人员</span>
+                </template>
+            </div>
+
+            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
+                <FormItem label="名称" prop="name">
+                    <i-input v-model="formValidate.name" placeholder="请输入名字"></i-input>
+                </FormItem>
+                <FormItem label="手机" prop="phone">
+                    <i-input v-model="formValidate.phone" placeholder="成员通过验证该手机号后可加入企业">
+                    </i-input>
+                </FormItem>
+                <FormItem label="工号" prop="staffCode">
+                    <i-input v-model="formValidate.staffCode" placeholder="请输入工号"  :disabled="flag !== 1 ? true : false" ></i-input>
+                </FormItem>
+                <FormItem label="角色" prop="role">
+                    <Select v-model="formValidate.role" placeholder="选择角色">
+                        <Option value="1">角色1</Option>
+                        <Option value="2">角色2</Option>
+                        <Option value="3">角色3</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="所属区域" prop="region">
+                    <Select v-model="formValidate.region" placeholder="选择区域">
+                        <Option value="1">区域1</Option>
+                        <Option value="2">区域2</Option>
+                        <Option value="3">区域3</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="所属店铺" prop="store">
+                    <Select v-model="formValidate.store" placeholder="选择店铺">
+                        <Option value="1">店铺1</Option>
+                        <Option value="2">店铺2</Option>
+                        <Option value="3">店铺3</Option>
+                    </Select>
+                </FormItem>
+                <FormItem style="text-align: left;">
+                    <Row>
+                        <i-col span="16">
+                            <Button type="primary" @click="handleSubmit('formValidate')">保存并生成推广码</Button>
+                            <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
+                        </i-col>
+                        <i-col span="8" style="text-align: right;">
+                            <Button>继续添加</Button>
+                        </i-col>
+                    </Row>
+
+
+
+                </FormItem>
+            </Form>
+        </Modal>
     </div>
 </template>
 
 <script>
+    import data from "../../utils/PhoneRegionData";
+
     export default {
         name: "IncreaseStaffManager",
         data () {
             return {
+                // 标记 1添加 2修改
+                flag: 1,
+                prefixDefault: data.prefixDefault,
+                isShow: false,
+                isShowAdd: false,
+                showStoreName: '',
+                qrCodeImage: '',
                 selectedRegion: null,
                 regionList: [],
                 selectedStore: null,
@@ -154,7 +241,36 @@
                         customerNum: 999,
                         qrCodeState: false
                     }
-                ]
+                ],
+                // 开通企业微信 表单
+                formValidate: {
+                    staffCode: '',
+                    region: '',
+                    phone: '',
+                    role: '',
+                    store: ''
+                },
+                ruleValidate: {
+                    name: [
+                        { required: true, message: '名称不能为空', trigger: 'blur' }
+                    ],
+                    staffCode: [
+                        { required: true, message: '工号不能为空', trigger: 'blur' }
+                    ],
+                    // mail: [
+                    //     { required: true, message: '邮箱不能为空', trigger: 'blur' },
+                    //     { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
+                    // ],
+                    role: [
+                        { required: true, message: '请选择角色', trigger: 'change' }
+                    ],
+                    region: [
+                        { required: true, message: '请选择区域', trigger: 'change' }
+                    ],
+                    store: [
+                        { required: true, message: '请选择店铺', trigger: 'change' }
+                    ]
+                }
             }
         },
         methods: {
@@ -164,15 +280,18 @@
             },
             // 预览二维码
             show: function () {
-
+                this.isShow = true;
+                this.showStoreName = '店铺1';
+                this.qrCodeImage = '../static/img/logo-title.png';
             },
             // 下载二维码
             download: function () {
 
             },
-            // 开通企业微信号
-            open: function () {
-
+            // 添加、修改推广人员
+            open: function (flag) {
+                this.flag = flag;
+                this.isShowAdd = true;
             },
             // 删除
             remove: function () {
@@ -181,6 +300,20 @@
             // switch开关
             onSwitchChangeLister: function () {
 
+            },
+            handleSubmit (name) {
+                this.$refs[name].validate((valid) => {
+                    if (valid) {
+                        // 调用添加接口
+                        this.$Message.success('Success!');
+                    } else {
+                        this.$Message.error('Fail!');
+                    }
+                })
+            },
+            handleReset (name) {
+                this.$refs[name].resetFields();
+                this.isShowAdd = false;
             }
         }
     }
diff --git a/kiisoo-ic-ui/src/pages/shop/IncreaseStoreManager.vue b/kiisoo-ic-ui/src/pages/shop/IncreaseStoreManager.vue
index cf268f0..6d433d0 100644
--- a/kiisoo-ic-ui/src/pages/shop/IncreaseStoreManager.vue
+++ b/kiisoo-ic-ui/src/pages/shop/IncreaseStoreManager.vue
@@ -123,8 +123,6 @@
                     <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
                 </FormItem>
             </Form>
-
-
         </Modal>
     </div>
 </template>
@@ -222,7 +220,7 @@
                     position: '',
                     interest: [],
                     desc: '',
-                    checkbox: 'vail'
+                    checkbox: ['vail']
                 },
                 ruleValidate: {
                     account: [
@@ -240,11 +238,6 @@
                     // ],
                     party: [
                         { required: true, message: '请选择部门', trigger: 'change' }
-                    ],
-
-                    interest: [
-                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
-                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
                     ]
                 }
             }
@@ -257,24 +250,6 @@
                 this.isShow = true;
                 this.showStoreName = '店铺1';
                 this.qrCodeImage = '../static/img/logo-title.png';
-                // const content = '<img src="'+ this.qrCodeImage +'" style="width: 200px;height: 200px;"/>';
-
-                // this.$Modal.info({
-                //     title: this.showStoreName,
-                //     content: content,
-                //     width: 300,
-                //     render: (h) => {
-                //         return h('img', {
-                //             attrs: {
-                //                 src: this.qrCodeImage,
-                //             },
-                //             style:{
-                //                 width:'200px',
-                //                 height:'200px'
-                //             }
-                //         })
-                //     }
-                // });
             },
             ok: function () {
                 this.isShow = false;