update: ui调整

src/views/ecm/marketing-event/assets/api.js

@@ -167,3 +167,6 @@ export const LoadTempList = params => requests(PREFIX + 'load-message-templateLi
 
 //会员等级
 export const getCardLevelList = params => requests('api-plug/member-grade-list', params);
+
+//企业列表
+export const getEntepriseList = params => requests(PREFIX + 'list-qywx-enteprise', params);

src/views/ecm/marketing-event/assets/img/qywx.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618468888381" class="icon" viewBox="0 0 1200 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1882" width="18.75" height="16" data-spm-anchor-id="a313x.7781069.0.i23" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M494.345 0C767.365 0 988.69 190.217 988.69 424.854v0.742a84.745 84.745 0 0 0-42.09-11.088 84.745 84.745 0 0 0-42.09 11.088v-0.707c0-186.191-181.284-341.98-410.165-341.98-228.917 0-410.2 155.789-410.2 341.945 0 88.135 40.36 171.502 112.64 235.096 18.608 16.349 28.813 39.901 28.071 64.3l-0.282 4.909-7.945 87.322 155.26-52.93a85.31 85.31 0 0 1 36.37-4.096l5.225 0.706c26.412 4.414 53.425 6.674 80.86 6.674 48.094 0 94.103-6.886 136.793-19.492l-0.07-1.235c0 32.132 18.537 59.957 45.62 73.728-56.39 19.314-117.936 29.907-182.342 29.907-32.486 0-64.23-2.718-94.95-7.838l-216.629 73.869a42.231 42.231 0 0 1-53.53-25.6 40.89 40.89 0 0 1-2.119-17.232l13.63-151.128C53.672 645.155 0 540.39 0 424.82 0 190.217 221.325 0 494.345 0z" fill="#606266" p-id="1883"></path><path d="M933.888 590.177c12.217 4.308 47.951 22.74 75.6 41.42 25.14 16.948 42.337 34.956 52.753 27.541 9.393-8.898-8.44-30.014-27.33-60.31-17.443-27.895-35.593-65.183-38.135-72.774-14.619-44.138-25.989-67.02-62.888-67.02s-66.807 30.014-66.807 67.02 31.85 51.906 66.807 64.123z" fill="#606266" p-id="1884"></path><path d="M819.377 733.643c3.954-12.676 21.256-49.752 38.947-78.495 16.03-26.13 33.192-44.138 25.812-54.73-8.793-9.535-28.99 9.18-58.121 29.165-26.836 18.397-62.747 37.747-70.091 40.466-42.62 15.82-64.689 27.895-64.053 65.89 0.635 37.923 30.367 68.148 66.313 67.513 35.981-0.636 49.893-33.686 61.193-69.809z" fill="#606266" p-id="1885"></path><path d="M1054.226 728.7c-4.167 12.605-22.105 49.363-40.254 77.788-16.49 25.847-33.933 43.538-26.73 54.272 8.616 9.675 29.131-8.686 58.615-28.142 27.118-17.902 63.347-36.617 70.762-39.195 42.867-15.042 65.148-26.765 65.148-64.723 0-37.924-29.167-68.714-65.148-68.714-36.017 0-50.494 32.803-62.393 68.714z" fill="#606266" p-id="1886"></path><path d="M924.213 866.692c-12.994-4.237-51.023-22.634-80.508-41.49-26.835-17.09-45.303-35.345-56.143-27.506-9.781 9.357 9.428 30.897 29.908 61.934 18.89 28.602 38.735 66.843 41.525 74.682 16.243 45.409 28.636 68.89 67.548 68.22 38.948-0.707 69.95-32.31 69.315-70.621-0.707-38.347-34.604-53.178-71.68-65.219z" fill="#606266" p-id="1887"></path></svg>
\ No newline at end of file

src/views/ecm/marketing-event/assets/img/sort.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618459213131" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1301" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M63.98 109.048v89.545h895.45v-89.545H63.98z m0 447.725h895.45v-89.546H63.98v89.546z m0 358.18h895.45v-89.546H63.98v89.545z" p-id="1302" fill="#606266"></path></svg>
\ No newline at end of file

src/views/ecm/marketing-event/assets/img/sort2.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618459213131" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1301" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M63.98 109.048v89.545h895.45v-89.545H63.98z m0 447.725h895.45v-89.546H63.98v89.546z m0 358.18h895.45v-89.546H63.98v89.545z" p-id="1302" fill="#909399"></path></svg>
\ No newline at end of file

src/views/ecm/marketing-event/components/item-qywx.vue

 <template>
   <div class="dm-qywx__item__wrap">
-    <div class="fz16">{{ qywx.qywxEnterpriseName }}1231231</div>
+    <div class="fz16">{{ qywx.qywxEnterpriseName }}</div>
     <div class="divider"></div>
-    <div>{{ item.title }}123</div>
-    <div style="margin-top:12px;color:#606266">{{ qywx.remark }}123</div>
+    <div>{{ item.title }}</div>
+    <div style="margin-top:12px;color:#606266">{{ qywx.remark }}</div>
     <p style="margin-top:12px">
       <span>任务完成方式</span>：
       <el-checkbox label="话务" :value="qywx.telFlag" :true-label="1" :false-label="0" disabled></el-checkbox>

src/views/ecm/marketing-event/components/lib-qywx.vue

 <template>
-  <el-dialog title="企微任务" :visible.sync="show" width="630px" @closed="close">
-    <dm-steps style="margin-bottom:30px" class="step-inner" :active="step" finish-status="success">
+  <el-dialog :title="isEdit ? '编辑企微任务' : '企微任务'" :visible.sync="show" width="630px" @closed="close">
+    <dm-steps v-if="!isEdit" style="margin-bottom:30px" class="step-inner" :active="step" finish-status="success">
       <dm-step title="编辑基本信息"></dm-step>
       <dm-step title="配置任务完成方式"></dm-step>
     </dm-steps>
-    <el-form ref="form" v-show="step == 0" label-width="96px">
-      <el-form-item label="选择企业">
-        <el-select v-model="form.qywxEnterpriseId"></el-select>
+    <div v-if="isEdit" class="sub-title">基本信息</div>
+    <el-form ref="form" :model="form" :rules="rules" v-show="step == 0 || isEdit" label-width="106px">
+      <el-form-item label="选择企业" prop="qywxEnterpriseId">
+        <el-select v-model="form.qywxEnterpriseId" @change="onChangeEnterprise" :disabled="isEdit">
+          <el-option v-for="el in entepriseList" :key="el.wxEnterpriseId" :value="el.wxEnterpriseId" :label="el.corpName"></el-option>
+        </el-select>
       </el-form-item>
-      <el-form-item label="任务标题">
+      <el-form-item label="任务标题" prop="title">
         <el-input show-word-limit v-model="form.title" :maxlength="20"></el-input>
       </el-form-item>
-      <el-form-item label="任务描述">
-        <el-input show-word-limit v-model="form.remark" :maxlength="20"></el-input>
+      <el-form-item label="任务描述" prop="remark">
+        <el-input type="textarea" show-word-limit v-model="form.remark" :rows="4" :maxlength="200" resize="none"></el-input>
       </el-form-item>
-      <el-form-item label="任务发放规则"></el-form-item>
-      <el-form-item label="任务逾期判定">
-        <el-input-number v-model="form.expireDays" :min="1"></el-input-number>
+      <el-form-item label="任务发放规则">
+        <div class="rule-header">
+          <span>优先级</span>
+          <span>发放对象</span>
+          <span>排序</span>
+        </div>
+        <draggable v-model="ruleList" animation="200" handle=".drag">
+          <transition-group>
+            <div class="rule-item" v-for="(el, i) in ruleList" :key="el.key">
+              <span>{{ i + 1 }}</span>
+              <span>{{ el.value }}</span>
+              <span>
+                <img class="drag" style="width:16px;height:16px;cursor:pointer" src="../assets/img/sort.svg" />
+              </span>
+            </div>
+          </transition-group>
+        </draggable>
+        <div class="tip">可点击表格处 <img style="width:12px;height:12px;" src="../assets/img/sort2.svg" /> 按钮进行拖拽排序。</div>
+      </el-form-item>
+      <el-form-item label="任务逾期判定" prop="expireDays">
+        <el-input-number v-model="form.expireDays" :min="1" controls-position="right"></el-input-number>
         <span>天之后</span>
       </el-form-item>
     </el-form>
-    <div v-show="step == 1">
+    <div v-if="isEdit" class="sub-title" style="margin-top:48px">任务完成方式</div>
+    <div v-show="step == 1 || isEdit">
       <div class="task-wrapper">
         <el-checkbox label="话务" v-model="form.telFlag" :true-label="1" :false-label="0"></el-checkbox>
       </div>
@@ -31,9 +53,13 @@
         <el-checkbox label="短信" v-model="form.smsFlag" :true-label="1" :false-label="0"></el-checkbox>
       </div>
     </div>
-    <template slot="footer" v-if="step == 0">
+    <template slot="footer" v-if="isEdit">
+      <el-button style="width:74px" :key="2" @click="close">取消</el-button>
+      <el-button style="width:74px" :key="2" type="primary" @click="addItem">确定</el-button>
+    </template>
+    <template slot="footer" v-else-if="step == 0">
       <el-button style="width:74px" :key="1" @click="close">取消</el-button>
-      <el-button style="width:74px" :key="1" type="primary" @click="step = 1">下一步</el-button>
+      <el-button style="width:74px" :key="1" type="primary" @click="onNext">下一步</el-button>
     </template>
     <template slot="footer" v-else-if="step == 1">
       <el-button style="width:74px" :key="2" type="primary" @click="step = 0">上一步</el-button>
@@ -43,6 +69,9 @@
 </template>
 
 <script>
+import Draggable from 'vuedraggable';
+import { getEntepriseList } from '../assets/api';
+
 export default {
   name: 'lib-qywx',
   props: {
@@ -57,12 +86,15 @@ export default {
       default: false
     }
   },
+  components: {
+    Draggable
+  },
   data() {
     return {
       step: 0,
       form: {
-        qywxEnterpriseId: '123123',
-        qywxEnterpriseName: '测试企业',
+        qywxEnterpriseId: '',
+        qywxEnterpriseName: '',
         remark: '',
         clerkRule: '1,2,3',
         title: '',
@@ -72,16 +104,31 @@ export default {
         smsFlag: 0,
         chatContent: null,
         smsContent: null
-      }
+      },
+      rules: {
+        qywxEnterpriseId: { required: true, message: '请选择企业', trigger: 'change' },
+        title: { required: true, message: '请填写任务标题', trigger: 'blur' },
+        remark: { required: true, message: '请填写任务描述', trigger: 'blur' },
+        expireDays: { required: true, message: '请填写', trigger: 'blur' }
+      },
+      ruleList: [
+        { key: 1, value: '专属导购' },
+        { key: 2, value: '最近消费导购' },
+        { key: 3, value: '服务门店店长' }
+      ],
+      entepriseList: [],
+      isEdit: false
     };
   },
+  created() {
+    this.getEntepriseList();
+  },
   methods: {
     close() {
       this.form = {
-        qywxEnterpriseId: '123123',
-        qywxEnterpriseName: '测试企业',
+        qywxEnterpriseId: '',
+        qywxEnterpriseName: '',
         remark: '',
-        clerkRule: '1,2,3',
         title: '',
         expireDays: 1,
         telFlag: 0,
@@ -99,6 +146,54 @@ export default {
       delete qywx.title;
       this.$emit('sendItem', { title: this.form.title, qywx, comName: 'qywx' });
       this.close();
+    },
+    async onNext() {
+      let valid = await this.$refs.form.validate();
+      if (valid) {
+        this.form.clerkRule = this.ruleList.map(el => el.key).join();
+        this.step = 1;
+      }
+    },
+    getEntepriseList() {
+      getEntepriseList()
+        .then(res => {
+          if (res.errorCode === 0) {
+            this.entepriseList = res.result;
+          } else {
+            this.$message({ message: res.message, type: 'error' });
+          }
+        })
+        .catch(err => {
+          this.$message({ message: err.data.message, type: 'error' });
+        });
+    },
+    onChangeEnterprise(v) {
+      let item = this.entepriseList.find(el => el.wxEnterpriseId == v);
+      console.log(item, v);
+      if (item) {
+        this.form.qywxEnterpriseName = item.corpName;
+      } else {
+        this.form.qywxEnterpriseName = '';
+      }
+    }
+  },
+  watch: {
+    show: {
+      handler() {
+        if (Object.keys(this.item).length > 0) {
+          this.isEdit = true;
+          for (let key in this.form) {
+            if (this.item.qywx[key] !== undefined) {
+              this.form[key] = this.item.qywx[key];
+            }
+          }
+          this.form.title = this.item.title;
+        } else {
+          this.isEdit = false;
+        }
+      },
+      immediate: true,
+      deep: true
     }
   }
 };
@@ -116,4 +211,47 @@ export default {
 .task-wrapper + .task-wrapper {
   margin-top: 10px;
 }
+.rule-header,
+.rule-item {
+  display: flex;
+  line-height: 32px;
+  color: #303133;
+  span {
+    flex: 1;
+    padding: 0 20px;
+  }
+  span:last-child {
+    text-align: right;
+  }
+}
+.rule-header {
+  background-color: #f1f3f7;
+}
+.tip {
+  font-size: 12px;
+  font-weight: 400;
+  color: #909399;
+  display: flex;
+  align-items: center;
+  img {
+    margin: 0 3px;
+  }
+}
+.sub-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 18px;
+  &::before {
+    content: '';
+    width: 3px;
+    display: inline-block;
+    height: 14px;
+    background: #1890ff;
+    margin-right: 8px;
+  }
+}
 </style>

src/views/ecm/marketing-event/index.vue

@@ -17,7 +17,7 @@
           <i class="dm-marketing__content--index">{{ i + 1 }}</i>
           <component :is="v.comName" :item="v.item" :isSupportVar="isSupportVar"></component>
           <template v-if="!readOnly">
-            <i class="el-icon-edit dm-marketing__opt--icon" v-if="showEdit(v) && (v.comName === 'item-teltask' || v.comName === 'item-text' || v.comName === 'item-wxa' || v.comName === 'item-integral')" @click="editItem(v)"></i>
+            <i class="el-icon-edit dm-marketing__opt--icon" v-if="showEdit(v) && (v.comName === 'item-teltask' || v.comName === 'item-text' || v.comName === 'item-wxa' || v.comName === 'item-integral' || v.comName === 'item-qywx')" @click="editItem(v)"></i>
             <dm-delete @confirm="delItem(v)">
               <i class="el-icon-delete dm-marketing__opt--icon"></i>
             </dm-delete>
@@ -67,7 +67,7 @@ import libQywx from './components/lib-qywx';
 
 // 全部的操作项
 // eslint-disable-next-line
-let allOptions = [{ name: '图文', value: 'teletext', key: 1, img: require('./assets/img/teletext.svg'), show: true }, { name: '文本', value: 'text', key: 2, img: require('./assets/img/text.svg'), show: true }, { name: '小程序', value: 'wxa', key: 3, img: require('./assets/img/wxa.svg'), show: true }, { name: '图片', value: 'image', key: 4, img: require('./assets/img/image.svg'), show: true }, { name: '卡券', value: 'card', key: 5, img: require('./assets/img/card.svg'), show: true }, { name: '短信', value: 'message', key: 6, img: require('./assets/img/message.svg'), show: true }, { name: '话务', value: 'teltask', key: 7, img: require('./assets/img/teltask.svg'), show: true }, { name: '积分', value: 'integral', key: 8, img: require('./assets/img/integral.svg'), show: true },{ name: '会员卡升级', value: 'grade', key: 9, img: require('./assets/img/grade.svg'), show: false, disabled: false }, { name: '企微任务', value: 'qywx', key: 10, img: require('./assets/img/integral.svg'), show: true }];
+let allOptions = [{ name: '图文', value: 'teletext', key: 1, img: require('./assets/img/teletext.svg'), show: true }, { name: '文本', value: 'text', key: 2, img: require('./assets/img/text.svg'), show: true }, { name: '小程序', value: 'wxa', key: 3, img: require('./assets/img/wxa.svg'), show: true }, { name: '图片', value: 'image', key: 4, img: require('./assets/img/image.svg'), show: true }, { name: '卡券', value: 'card', key: 5, img: require('./assets/img/card.svg'), show: true }, { name: '短信', value: 'message', key: 6, img: require('./assets/img/message.svg'), show: true }, { name: '话务', value: 'teltask', key: 7, img: require('./assets/img/teltask.svg'), show: true }, { name: '积分', value: 'integral', key: 8, img: require('./assets/img/integral.svg'), show: true },{ name: '会员卡升级', value: 'grade', key: 9, img: require('./assets/img/grade.svg'), show: false, disabled: false }, { name: '企微任务', value: 'qywx', key: 10, img: require('./assets/img/qywx.svg'), show: true }];
 export default {
   name: 'vue-gic-marketing-event',
   components: {
@@ -512,7 +512,7 @@ export default {
       this.$emit('has-card', item);
     },
     showEdit(item) {
-      this.options.find(i => {
+      return this.options.find(i => {
         return 'item-' + i.value == item.comName;
       });
     }