update: 导购设置

src/views/enterprise/guide-setting.vue

 <template>
-  <div class="guide-setting">
-    <dm-sub-title class="guide-setting-title">导购操作权限设置</dm-sub-title>
-    <div class="guide-auth-list">
-      <div class="guide-auth-item">
-        <span class="auth-item-label">允许编辑导购信息</span>
-        <el-switch v-model="settingData.editClerkFlag" :active-value="1" :inactive-value="0"></el-switch>
+  <el-tabs v-model="activeName">
+    <el-tab-pane label="导购操作权限设置" name="first">
+      <div class="guide-setting">
+        <div class="guide-auth-list">
+          <div class="guide-auth-item">
+            <span class="auth-item-label">允许编辑导购信息</span>
+            <el-switch v-model="settingData.editClerkFlag" :active-value="1" :inactive-value="0"></el-switch>
+          </div>
+          <div class="guide-auth-item">
+            <span class="auth-item-label">允许店长添加导购</span>
+            <el-switch v-model="settingData.addClerkFlag" :active-value="1" :inactive-value="0"></el-switch>
+          </div>
+          <div class="guide-auth-item">
+            <span class="auth-item-label">允许店长删除导购</span>
+            <el-switch v-model="settingData.delClerkFlag" :active-value="1" :inactive-value="0"></el-switch>
+          </div>
+        </div>
+        <el-button class="save-btn" v-if="$getButtonLimit($buttonCode.saveGuideSetting)" :limit-code="$buttonCode.saveGuideSetting" :loading="loading" type="primary" @click="onSave">保存</el-button>
       </div>
-      <div class="guide-auth-item">
-        <span class="auth-item-label">允许店长添加导购</span>
-        <el-switch v-model="settingData.addClerkFlag" :active-value="1" :inactive-value="0"></el-switch>
+    </el-tab-pane>
+    <el-tab-pane label="应用可见权限设置" name="second">
+      <div class="guide-setting">
+        <p class="app-auth-tip">设置导购可见应用</p>
+        <el-row>
+          <el-checkbox-group v-model="settingData.checked">
+            <el-col :span="3" v-for="el in allApps" :key="el.applicationId" style="margin-bottom: 12px">
+              <el-checkbox :label="el.applicationId">{{ el.applicationName }}</el-checkbox>
+            </el-col>
+          </el-checkbox-group>
+        </el-row>
+        <el-button class="save-btn" v-if="$getButtonLimit($buttonCode.saveAppsVisible)" :limit-code="$buttonCode.saveAppsVisible" :loading="loading" type="primary" @click="onSave">保存</el-button>
       </div>
-      <div class="guide-auth-item">
-        <span class="auth-item-label">允许店长删除导购</span>
-        <el-switch v-model="settingData.delClerkFlag" :active-value="1" :inactive-value="0"></el-switch>
-      </div>
-    </div>
-    <dm-sub-title class="guide-setting-title">应用可见权限设置</dm-sub-title>
-    <p class="app-auth-tip">设置导购可见应用</p>
-    <el-row>
-      <el-checkbox-group v-model="settingData.checked">
-        <el-col :span="3" v-for="el in allApps" :key="el.applicationId" style="margin-bottom: 12px">
-          <el-checkbox :label="el.applicationId">{{ el.applicationName }}</el-checkbox>
-        </el-col>
-      </el-checkbox-group>
-    </el-row>
-    <hb-form-bottom v-if="$getButtonLimit($buttonCode.saveGuideSetting)">
-      <el-button :limit-code="$buttonCode.saveGuideSetting" :loading="loading" type="primary" @click="onSave">保存</el-button>
-    </hb-form-bottom>
-  </div>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <script>
@@ -38,6 +43,7 @@ export default {
   data() {
     return {
       loading: false,
+      activeName: 'first',
       settingData: {
         editClerkFlag: 0,
         addClerkFlag: 0,
@@ -67,13 +73,21 @@ export default {
     onSave() {
       this.loading = true;
       const { editClerkFlag, addClerkFlag, delClerkFlag, checked } = this.settingData;
-      const params = { editClerkFlag, addClerkFlag, delClerkFlag, dataJson: '' };
-      params.dataJson = this.allApps.map(el => {
-        return { applicationId: el.applicationId, openFlag: checked.includes(el.applicationId) ? 1 : 0 };
-      });
-      params.dataJson = JSON.stringify(params.dataJson);
+      let params = {};
+      if (this.activeName == 'first') {
+        params = { editClerkFlag, addClerkFlag, delClerkFlag };
+      } else if (this.activeName == 'second') {
+        const dataJson = this.allApps.map(el => {
+          return { applicationId: el.applicationId, openFlag: checked.includes(el.applicationId) ? 1 : 0 };
+        });
+        params = { dataJson: JSON.stringify(dataJson) };
+      }
+      const methods = {
+        first: params => postRequest('/haoban-manage3-web/save-clerk-edit-flag', params),
+        second: params => postRequest('/haoban-manage3-web/open-or-close', params)
+      };
 
-      postRequest('/haoban-manage3-web/open-or-close', params)
+      methods[this.activeName](params)
         .then(res => {
           const { errorCode } = res.data || {};
           if (errorCode != 1) {
@@ -91,12 +105,8 @@ export default {
 
 <style lang="scss" scoped>
 .guide-setting {
-  padding: 20px;
-  .guide-setting-title {
-    margin-bottom: 22px;
-  }
+  padding: 0 20px 20px;
   .guide-auth-list {
-    margin-bottom: 44px;
     border-radius: 4px;
     border: 1px solid #dcdfe6;
     .guide-auth-item {
@@ -123,5 +133,8 @@ export default {
     color: #303133;
     line-height: 20px;
   }
+  .save-btn {
+    margin-top: 40px;
+  }
 }
 </style>