playlet/project/src/components/phaseConfig/addEditDialo...

<template>
  <div>
    <el-dialog class="dialogCon_permission" :title="dialogTitle" :visible.sync="dialogVisible" :append-to-body="true" width="660px" @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-base" v-for="(rItem,rIdx) in ruleList">
              <span class="f13 flexShrink0">规则：</span>
              <el-select style="width: 120px" :disabled="rItem.disabled" v-model="rItem.type" size="mini" placeholder="请选择">
                <el-option v-for="item in phaseList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <span class="lMar14 f13 flexShrink0">满足：</span>
              <div>
                <addTime v-if="rItem.type=='time'"></addTime>
                <screen-pay :reset='resetFlag' title="" v-if="rItem.type=='pay'"></screen-pay>
                <enterprise-tag :reset='resetFlag' title="" v-if="rItem.type=='label'"></enterprise-tag>
              </div>
              <i class="el-icon-delete" v-if="ruleList&&ruleList.length > 1" @click="delePhaseEvent(rItem)"></i>
            </div>
            <div class="addPhase" @click="addPhaseEvent">
              <i class="el-icon-circle-plus "></i> 添加规则
            </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:'',
        resetFlag:false,
        phaseList:[
          {label:'客户添加时间',value:'time'},
          {label:'付费情况',value:'pay'},
          {label:'标签',value:'label'},
        ],
      /*
        {type:'time',condition:{min:0,max:1}},
        {type:'pay',condition:{
          payStatus:'not - has',
          payMin:'',
          payMax:'',
          payType:'number -  money'
        }},
        {type:'label',condition:{
          tag:'1 - 2 - 3 ',
            tag_id_list:'标签分割'
        }}
      * */
        ruleList:[
          {type:'time',label:'客户添加时间',condition:{},disabled:false}
        ],//传给后台的格式和回显的规则

        flag:true,// 校验是否通过
        timeRef:'',
        payRef:'',
        tagRef:'',
      }
    },
    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 = ''
          }
        }
      },
    },
    methods: {
      //删除规则
      delePhaseEvent(rItem){
        if(this.ruleList&&this.ruleList.length==1){
          this.$message({
            message: '最少需要一个规则',
            type: "warning"
          })
          return
        }
        let idx = this.ruleList.findIndex(n=>n.type == rItem.type)
        this.ruleList.splice(idx,1)
        this.phaseList.push({
          label:rItem.label,value:rItem.type
        })
        this.ruleList[this.ruleList.length-1].disabled = false
      },
      //添加规则
      addPhaseEvent(){
        if(this.ruleList&&this.ruleList.length==3){
          this.$message({
            message: '每个规则仅可添加一次',
            type: "warning"
          })
          return
        }
        let idx = 0
        this.ruleList.forEach(rItem=>{
          rItem.disabled = true
          idx = this.phaseList.findIndex(n=>n.value == rItem.type)
        })
        this.phaseList.splice(idx,1)
        this.ruleList.push({
          type:this.phaseList[0].value,label:this.phaseList[0].label,condition:{},disabled:false,
        })
      },
      // 添加编辑 规则
      addEditEvent(){

      },
      // 删除
      deleEvent(){

      },
      //弹框关闭
      closeEvent(){
        this.$emit('close')
      },

      //规则校验
      handleAssignment(){
        this.flag = true
        console.log(this.$refs.timeRef.minVal);
        // console.log(this.$refs.timeRef.handleVal());
        // this.ruleList.forEach(rItem=>{
        //   if(rItem.type == 'time'){
        //    this.$nextTick(()=>{
        //      console.log(this.$refs.timeRef.handleVal());
        //    })
        //   }
        // })
      },
      //确定
      async confirmEvent (){
        if(this.iptName==''){
          this.$message({
            message: '规则标题必填',
            type: "warning"
          })
          return
        }
        await this.handleAssignment()
        if(!this.flag){
          return
        }
        console.log(this.ruleList);
        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;
        .el-icon-delete{
          color: #58BCA6;
          margin-left: auto;
          cursor: pointer;
        }
        .addPhase{
          margin-top: 10px;
          display: inline-block;
          .el-icon-circle-plus{
            color: #58BCA6;
            margin-right: 4px;
          }
          color: #58BCA6;
          cursor: pointer;
          font-size: 14px;
          &:hover{

          }
        }
      }
    }
  }
  .dialog-footer {
    margin-top: 40px;
  }
</style>