update: dist

src/views/enterprise/salutatory.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="warp">
       <h2>加好友配置</h2>
-      <span class="echoData" v-show="friendSettingType">{{ friendSettingTypeOption[friendSettingType] }}</span>
+      <span class="echoData" v-show="friendSettingType && friendSettingType != 4">{{ friendSettingTypeOption[friendSettingType] }}</span>
       <el-button type="text" style="margin-left: 20px;" @click="openDialog">去配置</el-button>
     </div>
     <div class="daily-set-wrap">
@@ -88,8 +88,7 @@ export default {
       friendSettingTypeOption: {
         1: '发送【好办欢迎语】+【带导购参数的会员小程序卡片】',
         2: '发送【好办欢迎语】+【带导购参数的公众号二维码】',
-        3: '发送【好办欢迎语】',
-        4: '不发送【好办欢迎语】，用企微欢迎语'
+        3: '发送【好办欢迎语】'
       },
       title: '',
       wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',

src/views/enterprise/salutatorySet.vue

@@ -33,17 +33,19 @@
                 </p>
               </el-popover>
             </div>
-            <div class="mediaEcho" v-if="form.welcomeMediaList && form.welcomeMediaList.length">
-              <div class="flexBox" v-for="(item, index) in form.welcomeMediaList" :key="index">
-                <svg-icon :iconname="iconType[item.mediaType]" size="16" style="margin-right: 13px;"> </svg-icon>
-                <span class="popverText">{{ item.mediaTitle }}</span>
-                <i class="el-icon-close" style="margin-left: 20px;cursor: pointer;" @click="handleDelMedia(item, index)"></i>
+            <div class="mediaEcho" v-if="showEchoData">
+              <div class="flexBoxContainer" v-for="(item, index) in form.welcomeMediaList" :key="index">
+                <div class="flexBox" v-if="item.mediaType != 5">
+                  <svg-icon :iconname="iconType[item.mediaType]" size="16" style="margin-right: 13px;"> </svg-icon>
+                  <span class="popverText">{{ item.mediaTitle }}</span>
+                  <i class="el-icon-close" style="margin-left: 20px;cursor: pointer;" @click="handleDelMedia(item, index)"></i>
+                </div>
               </div>
             </div>
-            <div class="addInfo" :style="form.welcomeMediaList && form.welcomeMediaList.length ? 'border-top: 1px dashed #dcdfe6;' : ''">
+            <div class="addInfo" :style="showEchoData ? 'border-top: 1px dashed #dcdfe6;' : ''">
               <el-popover placement="top" trigger="click">
                 <ul class="flex flex-wrap">
-                  <li v-for="(item, index) in uploadList" :key="index + 'emoji'" :class="['uploadListBox', (item.title == '小程序' && haveAddApplet) || form.welcomeMediaList.length >= 9 ? 'disabled' : '']" @click="handleUploadList(item, index)">
+                  <li v-for="(item, index) in uploadList" :key="index" :class="['uploadListBox', form.welcomeMediaList.length >= 9 ? 'disabled' : '']" @click="handleUploadList(item, index)">
                     <i :class="['iconfont-hb3', item.icon]" style="font-size:20px"></i>
                     <p>{{ item.title }}</p>
                     <input type="file" :accept="item.fileType" @change="e => handkeFileChange(e, item)" class="upload-input" />
@@ -57,11 +59,16 @@
               <p style="font-size:12px;color:#909399">(附件不超过9个，单个大小不超过2M，小程序仅支持添加1个)</p>
             </div>
           </el-form-item>
-          <el-form-item label="使用范围">
-            <div v-show="form.suitDepartmentAddList.length">
-              <el-tag size="small" v-for="(item, index) in form.suitDepartmentAddList" closable @close="handleTagClose(index)" :key="item.departmentId">
+          <el-form-item label="使用范围" required>
+            <div v-show="form.suitDepartmentAddList.length" class="scopeContainer">
+              <!-- <el-tag size="small" v-for="(item, index) in form.suitDepartmentAddList" closable @close="handleTagClose(index)" :key="item.departmentId">
+                {{ item.departmentName }}
+              </el-tag> -->
+              <div class="wwTag" v-for="(item, index) in form.suitDepartmentAddList" :key="item.departmentId">
+                <span class="font-14 color-2f54eb opacity80 iconfont-hb3  iconqiye-tianchong"></span>
                 {{ item.departmentName }}
-              </el-tag>
+                <i class="el-icon-close" style="margin-left: 20px;cursor: pointer;" @click="handleTagClose(index)"></i>
+              </div>
             </div>
             <span @click="openScopeDialog" class="color-2f54eb cursor-pointer" style="margin-left:8px;"> 请选择使用范围</span>
           </el-form-item>
@@ -103,8 +110,8 @@
                 </div>
               </div>
               <div v-if="item.mediaType == 5" class="appletsInfo">
-                <div class="appletsTitle">{{ item.mediaTitle }}</div>
-                <div class="appletsTitle" style="font-size:12px">{{ item.mediaMiniTitle }}</div>
+                <div class="appletsTitle">{{ item.miniProgramName }}</div>
+                <div class="appletsTitle" style="font-size:12px">{{ item.mediaTitle }}</div>
                 <img :src="item.mediaUrl" />
               </div>
             </div>
@@ -134,29 +141,6 @@
           <el-button type="primary" @click="addUrl">确认添加</el-button>
         </div>
       </el-dialog>
-      <el-dialog title="添加小程序" width="585px" class="replay-link-dialog" :visible.sync="appletsDialogVisible" @closed="onClosed">
-        <div role="alert" class="el-alert el-alert--info" style="width:430px;margin-bottom:20px">
-          <i class="el-alert__icon el-icon-info"></i>
-          <div class="el-alert__content">
-            <p class="el-alert__title">如需修改小程序信息，请前往【好办后台-企业设置】进行修改</p>
-          </div>
-        </div>
-        <el-form label-position="right" ref="form" :model="{}" label-width="100px">
-          <el-form-item label="小程序名称">
-            <span>{{ applet.miniprogramName }}</span>
-          </el-form-item>
-          <el-form-item label="标题">
-            <span>{{ applet.title }}</span>
-          </el-form-item>
-          <el-form-item label="封面">
-            <img :src="applet.imageUrl" style="width:128px;height:128px;border-radius: 4px;" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="appletsDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="addapplets">确认添加</el-button>
-        </div>
-      </el-dialog>
       <el-dialog title="请选择使用范围" width="886px" class="replay-link-dialog" :visible.sync="scopeVisible" @closed="clearAllSelectedData">
         <div class="scopeBox">
           <div class="left">
@@ -212,7 +196,8 @@ export default {
         title: '系统默认',
         welcomeContent: '你好，<微信昵称>',
         welcomeMediaList: [],
-        suitDepartmentAddList: []
+        suitDepartmentAddList: [],
+        suitDepartmentList: []
       },
       uploadList: [
         {
@@ -233,10 +218,6 @@ export default {
         {
           title: '链接',
           icon: 'iconlianjie'
-        },
-        {
-          title: '小程序',
-          icon: 'iconxiaochengxu'
         }
       ],
       iconType: {
@@ -256,21 +237,27 @@ export default {
       addReplayDialog: false,
       url: '',
       urlDialogVisible: false,
-      appletsDialogVisible: false,
       scopeVisible: false,
       treeData: [],
       treeDataCopy: [],
       loading: false,
       btnLoading: false,
       selectedTreeData: [],
-      applet: {},
       friendSettingType: ''
     };
   },
   watch: {},
   computed: {
-    haveAddApplet() {
-      return this.form.welcomeMediaList.filter(item => item.mediaType == 5).length > 0;
+    showEchoData() {
+      let bool1 = true;
+      let bool2 = false;
+      if (this.form.welcomeMediaList && this.form.welcomeMediaList.length && this.form.welcomeMediaList.length == 1 && this.form.welcomeMediaList[0].mediaType == 5) {
+        bool1 = false;
+      }
+      if (this.form.welcomeMediaList && this.form.welcomeMediaList.length && this.form.welcomeMediaList.length != 1) {
+        bool2 = true;
+      }
+      return bool1 && bool2;
     }
   },
   mounted() {
@@ -281,10 +268,10 @@ export default {
     if (id) {
       that.getData();
     }
-    if (type) {
+    if (type && type == 1 && !id) {
       this.friendSettingType = type;
+      this.getAppData();
     }
-    this.getAppData();
   },
   destroyed() {
     document.documentElement.style.backgroundColor = '#fff';
@@ -301,7 +288,14 @@ export default {
         .then(res => {
           let resData = res.data;
           if (resData.errorCode == 1 && resData.result) {
-            this.applet = resData.result.length && resData.result[0];
+            const applet = resData.result.length && resData.result[0];
+            this.form.welcomeMediaList.push({
+              miniProgramName: applet.miniprogramName,
+              mediaTitle: applet.title,
+              mediaType: 5,
+              mediaUrl: applet.imageUrl,
+              mediaSize: ''
+            });
           }
         })
         .catch(function(error) {
@@ -437,8 +431,6 @@ export default {
         document.getElementsByClassName('upload-input')[index].click();
       } else if (item.title == '链接') {
         this.urlDialogVisible = true;
-      } else if (item.title == '小程序') {
-        this.appletsDialogVisible = true;
       }
     },
     handleDelMedia(row, index) {
@@ -529,16 +521,6 @@ export default {
       });
       this.urlDialogVisible = false;
     },
-    addapplets() {
-      this.form.welcomeMediaList.push({
-        mediaTitle: this.applet.miniprogramName,
-        mediaMiniTitle: this.applet.title,
-        mediaType: 5,
-        mediaUrl: this.applet.imageUrl,
-        mediaSize: ''
-      });
-      this.appletsDialogVisible = false;
-    },
     addLinkDialogShow() {
       this.addReplayDialog = true;
     },
@@ -567,7 +549,7 @@ export default {
           let resData = res.data;
           if (resData.code == 0 && resData.result) {
             const { suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId } = resData.result;
-            this.form = { suitDepartmentList, suitDepartmentAddList: JSON.parse(JSON.stringify(suitDepartmentList)) || [], title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId };
+            this.form = { suitDepartmentList: suitDepartmentList || [], suitDepartmentAddList: JSON.parse(JSON.stringify(suitDepartmentList)) || [], title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId };
             console.log(this.form);
             this.form = Object.assign({}, this.form);
           }
@@ -580,29 +562,28 @@ export default {
         });
     },
     submit() {
+      if (!this.form.suitDepartmentAddList.length) {
+        this.$message.error('请选择使用范围');
+        return;
+      }
       this.$refs.form.validate(value => {
         if (value) {
           const { suitDepartmentAddList, suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId } = this.form;
-          const para = { title, welcomeId, welcomeContent, mediaList: welcomeMediaList, wxEnterpriseId: wxEnterpriseId || this.wxEnterpriseId };
-          if (!suitDepartmentAddList.length) {
-            para.suitDepartmentDeleteList = suitDepartmentList;
-            para.suitDepartmentAddList = [];
-          } else {
-            const addArr = [];
-            const delArr = [];
-            suitDepartmentAddList.forEach(ele => {
-              if (!suitDepartmentList.filter(item => item.departmentId == ele.departmentId).length) {
-                addArr.push(ele);
-              }
-            });
-            suitDepartmentList.forEach(ele => {
-              if (!suitDepartmentAddList.filter(item => item.departmentId == ele.departmentId).length) {
-                delArr.push(ele);
-              }
-            });
-            para.suitDepartmentAddList = addArr;
-            para.suitDepartmentDeleteList = delArr;
-          }
+          const para = { title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId: wxEnterpriseId || this.wxEnterpriseId };
+          const addArr = [];
+          const delArr = [];
+          suitDepartmentAddList.forEach(ele => {
+            if (!suitDepartmentList.filter(item => item.departmentId == ele.departmentId).length) {
+              addArr.push(ele);
+            }
+          });
+          suitDepartmentList.forEach(ele => {
+            if (!suitDepartmentAddList.filter(item => item.departmentId == ele.departmentId).length) {
+              delArr.push(ele);
+            }
+          });
+          para.suitDepartmentAddList = addArr;
+          para.suitDepartmentDeleteList = delArr;
           para.suitDepartmentAddList.forEach(item => {
             item.selectType = 1;
           });
@@ -655,7 +636,7 @@ export default {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-
+    margin-bottom: 14px;
     .popverText {
       font-size: 12px;
       line-height: 16px;
@@ -665,8 +646,10 @@ export default {
       text-overflow: ellipsis;
     }
   }
-  .flexBox + .flexBox {
-    margin-top: 14px;
+  .flexBoxContainer:last-child {
+    .flexBox {
+      margin-bottom: 0;
+    }
   }
 }
 .addInfo {
@@ -706,6 +689,19 @@ export default {
 .uploadListBox + .uploadListBox {
   margin-left: 20px;
 }
+.scopeContainer {
+  .wwTag {
+    background: #ebeffe;
+    border-radius: 4px;
+    display: inline-block;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 8px;
+    box-sizing: border-box;
+    margin-left: 8px;
+    margin-bottom: 8px;
+  }
+}
 .welcomeContent {
   height: 220px;
   border: 1px solid #dcdfe6;