feat: copy 客户阶段配置 代码

project/src/assets/config/interface_api.js

@@ -320,6 +320,12 @@ var api = {
   smartPush_senderListExport: "/api/CircleMassMsg/senderListExport", // 企微助手 - 智能推送 - 推送记录 - 详情&成员详情导出
   smartPush_massSendCustList: "/api/CircleMassMsg/massSendCustList", // 企微助手 - 智能推送 - 推送记录 - 详情&客户详情列表
   smartPush_massSendCustListExport: "/api/CircleMassMsg/massSendCustListExport", // 企微助手 - 智能推送 - 推送记录 - 详情&客户详情导出
+
+  //客户阶段配置
+  phaseList: "/api/CustomerStage/stageRuleList",
+  phaseDel: "/api/CustomerStage/stageRuleDel",
+  phaseSort: "/api/CustomerStage/stageRuleSort",
+  phaseSet: "/api/CustomerStage/setStageRule",
 };
 
 export { api };

project/src/components/phaseConfig/addEditDialog.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <el-dialog class="dialogCon_permission" :title="dialogTitle" :visible.sync="dialogVisible" :append-to-body="true" width="600px" @close="closeEvent">
+      <div class="dialogCon">
+        <div class="itemBox" style="margin-top: 0">
+          <div class="name"><em>*</em>阶段名称:</div>
+          <div class="ipt">
+            <el-input size="small" v-model="iptName"  placeholder="请输入阶段名称" style="width: 100%"></el-input>
+          </div>
+        </div>
+        <div class="itemBox">
+          <div class="name">阶段描述:</div>
+          <div class="ipt">
+            <el-input size="small" v-model="iptDesc"  placeholder="请输入阶段描述" style="width: 100%"></el-input>
+          </div>
+        </div>
+        <div class="itemBox" style="align-items: baseline">
+          <div class="name"><em>*</em>阶段规则:</div>
+          <div class="ipt phaseBox">
+            <div class="flex-row bMar15">
+              <div class="chooseItem" v-for="item in phaseList" :key="item.value"
+                   :class="item.value == phaseVal ? 'acItem' : ''"
+                   @click.stop="phaseVal = item.value"
+                   >
+                <span class="checkBox" @click.stop="switchCheckBox(item.value)"
+                                     :class="choosePhaseArr.indexOf(item.value)>-1 ? 'acCheck' : ''"></span>
+                {{item.label}}
+              </div>
+            </div>
+            <div>
+              <addTime v-show="phaseVal==1"></addTime>
+              <screen-pay :reset='resetFlag' title="" v-show="phaseVal==2"></screen-pay>
+              <enterprise-tag :reset='resetFlag' title="" v-show="phaseVal==3"></enterprise-tag>
+            </div>
+
+
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeEvent">取 消</el-button>
+        <el-button size="mini" type="primary" @click="confirmEvent()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import screenPay from './pay.vue'
+  import addTime from './addTime.vue'
+  import enterpriseTag from '@/components/assembly/screen/enterpriseTag.vue'
+  export default {
+    name: 'addEditDialog',
+    components: { screenPay,addTime,enterpriseTag},
+    props: ["dialogVisible","echoObj"],
+    data () {
+      return {
+        dialogTitle:'阶段配置',
+        iptName:'',
+        iptDesc:'',
+        phaseVal:1,
+        resetFlag:false,
+        phaseList:[
+          {label:'客户添加时间',value:1},
+          {label:'付费情况',value:2},
+          {label:'标签',value:3},
+        ],
+        choosePhaseArr:[],
+        ruleList:[
+          {type:'1',condition:'test'}
+        ],//传给后台的格式和回显的规则
+      }
+    },
+    created () {
+
+
+    },
+    watch: {
+      dialogVisible(isShow) {
+        // 弹框显示 => 初始化表单数据
+        if (isShow) {
+          console.log(this.echoObj);
+          if(this.echoObj.rule_id){ //编辑
+            this.iptName = this.echoObj.stage_title
+            this.iptDesc = this.echoObj.stage_desc
+          }else{ //新增
+            this.iptName = ''
+            this.iptDesc = ''
+            this.phaseVal = 1
+          }
+        }
+      },
+    },
+    methods: {
+      // 添加编辑 规则
+      addEditEvent(){
+
+      },
+      // 删除
+      deleEvent(){
+
+      },
+      //弹框关闭
+      closeEvent(){
+        this.$emit('close')
+      },
+      //选择规则
+      switchCheckBox(val){
+        let idx = this.choosePhaseArr.indexOf(val)
+        if(idx > -1){
+          this.choosePhaseArr.splice(idx,1)
+        }else{
+          this.phaseVal = val
+          this.choosePhaseArr.push(val)
+        }
+      },
+      //确定
+      confirmEvent(){
+        if(this.iptName==''){
+          this.$message({
+            message: '规则标题必填',
+            type: "warning"
+          })
+          return
+        }
+        this.$axios.post(this.URL.BASEURL + this.URL.phaseSet, {
+          rule_id: this.echoObj ? this.echoObj.rule_id : '',
+          stage_title: this.iptName,
+          stage_desc:this.iptDesc,
+          stage_rule:this.ruleList
+        }).then((res) => {
+          var res = res.data
+          if (res && res.errno == 0) {
+            this.$message({
+              message: '添加成功',
+              type: "success"
+            })
+            this.$emit('close',true)
+          } else if (res.errno != 4002) {
+            this.$message({
+              message: res.err,
+              type: "warning"
+            })
+          }
+        }).catch((err) => {
+        });
+      }
+
+    }
+  }
+</script>
+<style lang="scss">
+  .dialogCon {
+    .itemBox {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      .name {
+        width: 80px;
+        flex-wrap: nowrap;
+        text-align: right;
+        margin-right: 10px;
+        flex-shrink: 0;
+        em {
+          color: red;
+        }
+      }
+      .ipt{
+        width: 100%;
+      }
+      .phaseBox{
+        padding: 20px;
+        background-color: #f8f8f8;
+        .chooseItem{
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          margin-right: 25px;
+          .checkBox{
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 3px;
+            border: 1px solid #d8d8d8;
+            margin-right: 6px;
+          }
+        }
+        .acItem{
+          color: #00B38A;
+          font-weight: 600;
+        }
+        .acCheck{
+          background-color: #00B38A;
+          border: 1px solid #00B38A!important;
+        }
+      }
+    }
+  }
+  .dialog-footer {
+    margin-top: 40px;
+  }
+</style>

project/src/components/phaseConfig/addTime.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="timeLineBox " style="margin: 10px 0;">
+    <el-radio v-model="timeline" :label="24">24小时</el-radio>
+    <el-radio v-model="timeline" :label="168">7天</el-radio>
+    <el-radio v-model="timeline" :label="360">15天</el-radio>
+    <el-radio v-model="timeline" :label="-1">自定义</el-radio>
+    <date-picker v-if="timeline == -1" title="" width="355px" :timeFlag="true"
+                 :afferent_time='afferent_time' @changeTime="changeTime"
+                 style="margin:6px 0 8px 0">
+    </date-picker>
+    <!-- :reset='resetFlag'-->
+  </div>
+</template>
+<script>
+  import datePicker from '@/components/assembly/screen/datePicker.vue'
+  export default {
+    name: 'addTime',
+    components: { datePicker },
+    props: ["afferent_time"],
+    data () {
+      return {
+        timeline:24,
+        resetFlag:false
+      }
+    },
+    created () {
+
+
+    },
+    methods: {
+      //
+      changeEvent(){
+
+      },
+      changeTime(){
+
+      }
+
+
+    }
+  }
+</script>
+<style lang="scss">
+
+</style>

project/src/components/phaseConfig/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="screenBox">
+      <el-button type="primary" size="small" @click="addEditEvent">阶段配置</el-button>
+      <span class="f12 lMar8">*上下拖动调整阶段排列顺序</span>
+    </div>
+
+    <el-table ref="phaseTable" :height="height" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top:10px" v-loading="loading">
+      <el-table-column min-width='160' v-for="(item,index) in desCol" :key="index+'des'" :prop="item.prop" :label="item.label" show-overflow-tooltip align="center" :fixed="item.prop=='date'?'left':false">
+        <template slot-scope="scope">
+          <template v-if="item.prop == 'enable'">
+            <span v-if="scope.row.enable==1" class="c-448AFF">启用</span>
+            <span v-else class="c-F03F5C">禁用</span>
+          </template>
+          <span v-else>{{scope.row[item.prop]}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" min-width="160" align="center">
+        <template slot-scope="scope">
+          <el-button type="primary" size="mini" @click="addEditEvent(scope.row)">编辑</el-button>
+          <el-popconfirm title="确定删除吗？" @confirm="deleEvent(scope.row.rule_id)">
+            <el-button slot="reference" type="danger" size="mini">删除</el-button>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination" v-show="total>0">
+      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+      </el-pagination>
+    </div>
+
+    <!--阶段配置弹框-->
+    <addEditDialog
+      :dialogVisible="dialogVisible"
+      :echoObj="echoObj"
+      @close="closeEvent"
+    />
+  </div>
+</template>
+<script>
+  import addEditDialog from './addEditDialog.vue'
+  export default {
+    name: 'phaseConfig',
+    components: { addEditDialog },
+    data () {
+      return {
+        desCol: [
+          { prop: "sort_order", label: "排序", min_width: 180, fixed: 'left' },
+          { prop: "stage_title", label: "客户阶段", min_width: 180, },
+          { prop: "stage_desc", label: "阶段描述", min_width: 180, },
+          { prop: "stage_rule", label: "阶段规则", min_width: 180, },
+        ],
+        height:'',
+        tableData:[],
+        dialogVisible:false,
+        total:0,
+        page:1,
+        pages:0,
+        page_size:20,
+        loading:false,
+        echoObj:{}
+      }
+    },
+    created () {
+      this.height = document.documentElement.clientHeight - 280 > 400 ? document.documentElement.clientHeight - 280 : 400
+      this.init()
+    },
+    methods: {
+      // 添加编辑 规则
+      addEditEvent( row ){
+        this.dialogVisible = true
+        this.echoObj = row
+      },
+      // 删除
+      deleEvent(id){
+        this.$axios.post(this.URL.BASEURL + this.URL.phaseDel, {
+          rule_id: id,
+        }).then((res) => {
+          var res = res.data
+          if (res && res.errno == 0) {
+            this.init(1)
+          } else if (res.errno != 4002) {
+            this.$message({
+              message: res.err,
+              type: "warning"
+            })
+          }
+        }).catch((err) => {
+        });
+      },
+      // 分页
+      handleCurrentChange(){
+
+      },
+      //关闭弹框
+      closeEvent(flag){
+        this.dialogVisible = false
+        if(flag){
+          this.init(1)
+        }
+      },
+      //列表
+      init(page){
+        this.page = page ? page : this.page;
+        this.loading = true
+        this.$axios.get(this.URL.BASEURL + this.URL.phaseList, {
+          params: {
+            page: this.page,
+            page_size: this.page_size
+          }
+        }).then((res) => {
+          var res = res.data
+          this.loading = false
+          if (res && res.errno == 0) {
+            this.tableData = res.rst.data;
+            this.total = res.rst.pageInfo.total;
+            this.pages = res.rst.pageInfo.pages;
+          } else if (res.errno != 4002) {
+            this.$message({
+              message: res.err,
+              type: "warning"
+            })
+          }
+        }).catch((err) => {
+          this.loading = false
+        });
+      }
+
+
+    }
+  }
+</script>
+<style lang="scss">
+
+</style>

project/src/components/phaseConfig/pay.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="common-screen-item pay">
+    <label class="common-screen-label" v-if="title&&title!=''">{{title}}</label>
+    <el-popover placement="bottom" trigger="click" v-model="visible" @hide="visibleHide">
+      <div :style="width?'width:'+width:''" :class="['common-screen-self-box','common-input-select',valueObj.radio!=null&&clearable?'common-input-select-hover':'']" slot="reference">
+        <div :class="['common-screen-self-con',valueObj.radio!=0&&valueObj.radio==null?'common-screen-self-placeholder':'']" :style="width?'text-align: left;padding-left: 15px !important;':''">
+          <div class="common-screen-self-con-div">
+            <span>{{valueObj.radio==0?'未付费':valueObj.radio==1?(valueObj.minValue==''&&valueObj.maxValue==''?'已付费':(valueObj.minValue==''&&valueObj.maxValue!=''?`已付费（${valueObj.maxValue}次）以下`:(valueObj.minValue!=''&&valueObj.maxValue==''?`已付费（${valueObj.minValue}次）以上`:`已付费（${valueObj.minValue} ～ ${valueObj.maxValue}次）`))):'请选择'}}</span>
+          </div>
+          <i class="el-icon-circle-close other-icon" @click.stop="clear"></i>
+        </div>
+        <div class="common-screen-self-icon">
+          <i class="el-icon-arrow-down"></i>
+        </div>
+      </div>
+      <div class="popover_con">
+        <div :class="['item',radio==0?'active':'']" @click="payChange(0)">未付费</div>
+        <div :class="['item',radio==1?'active':'']" @click="payChange(1)">已付费</div>
+        <template v-if="radio==1">
+          <div class="custom">
+            <p>自定义充值次数</p>
+            <div class="inputBox">
+              <input type="number" placeholder="充值次数" v-model="valueObj.minValue">
+              <span> - </span>
+              <input type="number" placeholder="充值次数" v-model="valueObj.maxValue">
+              <span>次</span>
+            </div>
+          </div>
+
+          <div class="custom">
+            <p>自定义充值金额</p>
+            <div class="inputBox">
+              <input type="number" placeholder="充值金额" v-model="minMoneyValue">
+              <span> - </span>
+              <input type="number" placeholder="充值金额" v-model="maxMoneyValue">
+              <span>次</span>
+            </div>
+          </div>
+
+          <div class="buttons">
+            <el-button type="primary" size="mini" @click="customPay">确定</el-button>
+          </div>
+        </template>
+      </div>
+    </el-popover>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '付费情况'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    reset: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+    },
+    afferent_obj: {//接口传入数据 {pay_status: 1 , pay_num_min: '' , pay_num_max: '',}
+      type: Object,
+      default: () => { }
+    },
+  },
+  watch: {
+    reset () {
+      this.radio = null
+      this.valueObj.radio = null
+      this.valueObj.minValue = '';
+      this.valueObj.maxValue = '';
+      this.minMoneyValue = '';
+      this.maxMoneyValue = '';
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      radio: null,
+      valueObj: {
+        radio: null,
+        minValue: '',
+        maxValue: '',
+      },
+      minMoneyValue: '',
+      maxMoneyValue: '',
+    }
+  },
+  mounted () {
+    if (this.afferent_obj) {
+      this.valueObj = {
+        radio: this.afferent_obj.pay_status,
+        minValue: this.afferent_obj.pay_num_min || this.afferent_obj.pay_num_min == 0 ? this.afferent_obj.pay_num_min : '',
+        maxValue: this.afferent_obj.pay_num_max || this.afferent_obj.pay_num_max == 0 ? this.afferent_obj.pay_num_max : '',
+      }
+      this.radio = this.afferent_obj.pay_status
+      this.minMoneyValue = ''
+      this.maxMoneyValue = ''
+    }
+  },
+  methods: {
+    visibleHide () {
+      if (this.radio == 1) {
+        if (this.valueObj.minValue == '' || this.valueObj.maxValue == '' || this.valueObj.maxValue < this.valueObj.minValue) {
+          return
+        }
+        this.valueObj.radio = 1;
+        this.$emit('payChange', this.valueObj)
+        this.visible = false
+      }
+    },
+    clear () {
+      if (this.valueObj.radio == null) {
+        this.visible = !this.visible
+        return
+      }
+      this.radio = null
+      this.valueObj.radio = null
+      this.valueObj.minValue = '';
+      this.valueObj.maxValue = '';
+      this.$emit('payChange', this.valueObj)
+    },
+    payChange (type) {
+      this.radio = type;
+      if (type == 0) {
+        this.valueObj = {
+          radio: type,
+          minValue: '',
+          maxValue: '',
+        }
+        this.visible = false
+        this.$emit('payChange', this.valueObj)
+      }
+    },
+    customPay () {
+      if (this.valueObj.maxValue && this.valueObj.minValue && this.valueObj.maxValue < this.valueObj.minValue) {
+        this.$message({
+          message: '请正确填写自定义次数',
+          type: "warning"
+        })
+        return
+      }
+      this.valueObj.radio = 1;
+      this.$emit('payChange', this.valueObj)
+      this.visible = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.popover_con {
+  width: 250px;
+  .item {
+    font-size: 14px;
+    padding: 0 20px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #606266;
+    height: 34px;
+    line-height: 34px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor: pointer;
+    &.active {
+      color: #00b38a;
+      font-weight: bold;
+    }
+    &:hover {
+      background-color: #f5f7fa;
+    }
+  }
+}
+.custom {
+  border-top: 1px dotted #cecece;
+  margin: 20px;
+  margin-top: 10px;
+  p {
+    color: #383e47;
+    font-size: 13px;
+    line-height: 18px;
+    margin-top: 14px;
+  }
+  .inputBox {
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+    input {
+      width: 80px;
+      height: 30px;
+      background: #ffffff;
+      border-radius: 4px;
+      border: 1px solid #b7b9c6;
+      font-size: 12px;
+      padding-left: 8px;
+      line-height: 30px;
+    }
+    span {
+      font-size: 13px;
+      line-height: 18px;
+      color: #383e47;
+      margin: 0 10px;
+    }
+  }
+}
+.buttons {
+  text-align: right;
+  padding-bottom: 10px;
+  padding-right: 20px;
+}
+</style>

project/src/router/allRouter.js

@@ -77,6 +77,9 @@ const platformPromote = () => import(/* webpackChunkName: 'platformPromote' */ '
 // 企微助手 - 客户分析
 const customerAnalysis = () => import(/* webpackChunkName: 'customerAnalysis' */ '@/components/customerAnalysis/index.vue')
 
+// 客户管理 - 客户阶段配置
+const phaseConfig = () => import(/* webpackChunkName: 'phaseConfig' */ '@/components/phaseConfig/index.vue')
+
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
 export var allRouter = [
@@ -703,6 +706,17 @@ export var allRouter = [
           title: '客户分析'
         }
       },
+      {
+        path: 'phaseConfig',
+        name: 'phaseConfig',
+        component: phaseConfig,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '客户阶段配置',
+          isData: false
+        }
+      },
     ]
   }
 ]