picc / admin-no-ui · Files

<template>
<div>
  <a-drawer
    :title="title"
    :maskClosable="false"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    :centered='true'
    :confirmLoading="confirmLoading"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-card class="card" title="配置基础信息" :bordered="false">
          <a-row :gutter="24">
              <a-form-item label="用信流模板编号:" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show=" model.collectionProcessNo ? true : false">
                <a-input
                  :disabled="disabled"
                  v-decorator="[
                    'collectionProcessNo',
                    {'initialValue': model ? model.collectionProcessNo : ''}
                  ]"
                  placeholder="请输入用信流模板编号"
                />
              </a-form-item>
              <a-form-item label="用信流模板名称：" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  v-decorator="[
                    'collectionProcessName',
                    { rules: [{ required: true, message: '请输入用信流模板名称' }] },
                  ]"
                  placeholder="请输入用信流模板名称"
                />
              </a-form-item>
          </a-row>

          <a-row :gutter="24">
              <a-form-item label="用信主体类型:" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select 
                  v-decorator="[
                      'userType',
                      { rules: [{ required: true, message: '请输入用信主体类型' }] },
                    ]"
                  placeholder="请输入用信主体类型"
                @change="handleSelectChange">
                  <a-select-option :value="1">个人</a-select-option>
                  <a-select-option :value="2">企业</a-select-option>
                  <a-select-option :value="3">企业法人</a-select-option>
                </a-select>
              </a-form-item>
          </a-row>
        </a-card>
      </a-form>

        <a-card :title="`${config.typeTitle}${config.subtypeTitle}信息`" v-show="showOtherInfo" :bordered="false">
          <div>移动平台所有的{{config.typeTitle}}客户信息包含如下</div>
          <div style="padding: 20px">
            <a-tag v-for="(item,index) in flowNodeData" :key="index" style="margin:5px ">
              <span @click="handleTemplatePhoto(item)">{{item.name}}</span>
            </a-tag>
          </div>
        </a-card>

        <a-card title="用信流配置" v-show="showOtherInfo" :bordered="false">
          <div>移动平台用信流程配置:</div>
          <div style="padding: 20px">
            <a-row :gutter="24">
              <a-col >
                <button @click="addNodeService" style="margin-bottom: 20px">添加用信流节点</button>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col>
                <a-timeline>
                  <a-timeline-item v-for="(item,index) of receiveDotData" :key="index"> 
                      <template >
                        <slot :name="item" >{{item.name}}</slot>
                        <div style="color:#1890FF;"><span @click="delNodeService(item)">删除</span><span style="margin:0 5px;">|</span><span @click="editNodeService(item)">修改</span></div>
                      </template>
                  </a-timeline-item>
                </a-timeline>
              </a-col>
            </a-row>
            
          </div>
        </a-card>
    </a-spin>
    <div class="drawer-bootom-button" >
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">确定</a-button>
    </div>
  </a-drawer>
    <collection-create-form  ref="collectionForm" @ok="modalFormOk"/>
</div>
</template>
<script>
  import pick from 'lodash.pick'
  import store from '@/store'
  import CollectionCreateForm from './InFeedFlowDotModal'
  import { saveCollectionProcess, updateCollectionProcess } from '@/api/insys'
  export default {
    name: "repayFlowTemplateModel",
    components:{
      CollectionCreateForm,
    },
    data () {
      return {
        modalWidth:800,
        drawerWidth:700,
        visible: false,
        confirmLoading: false,
        confirmDirty: false,
        title: '',
        validatorRules:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        form: this.$form.createForm(this,{ name: 'validate_main' }),
        model: {},
        flowNodeData:[], //获取到用信流节点数据
        receiveDotData:[],
        receiveDotDataNum:[],
        receiveDotDataName:[],
        url: {
          fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
          imgerver: window._CONFIG['domianURL']+"/sys/common/view",
        },
        config:{
          typeTitle:'',
          subtypeTitle:''
        },
        showOtherInfo:false,
        disabled:false
      }
    },
    methods: {
      handleTemplatePhoto(item){
        const src = require(`@/assets/phototmp/${item.code}.png`)
        const title = item.name
        const h = this.$createElement;
        this.$info({
            title: title,
            content: h('div', null, [
              h('img', 
                { 
                  attrs: { 
                    src:  src, 
                    style:'width:200px'
                  },
                  
                },
              ) 
            ]),
            dangerouslyUseHTMLString: true,
        })

      },
      handleSelectChange(value) {
        this.reset()
        if(value) {
          this.showOtherInfo = true
        }
        if(value == '1'){
          this.config.typeTitle = '个人'
          this.config.subTypeTitle = '授信用信'
        }else if(value == '2'){
          this.config.typeTitle = '企业'
          this.config.subTypeTitle = '授信用信'
        }else if(value == '3'){
          this.config.typeTitle = '企业法人'
          this.config.subTypeTitle = '授信用信'
        }
        
        this.storeGetFlowNodeFn(value,'2')
      },
      //新增时候获取用信流数据
      storeGetFlowNodeFn(ouserType,otype){
        let that = this;
        store.dispatch('GetFlowNodeData',{userType:ouserType,type:otype}).then(res => {
          var res = res.result ? res.result.processNodes : []
          that.flowNodeData = res
        }).catch((err) => {
          console.log(err);
        });
      },
      //处理 submit数据
      handleSubmitCheckedData(orgin){
        for(var idx = 0; idx < orgin.length; idx++) {
          if(orgin[idx].nodeServices){
            for(var idx1 = 0; idx1 < orgin[idx].nodeServices.length; idx1++) {
              //决策引擎
              if(orgin[idx].nodeServices[idx1].data && orgin[idx].data){
                orgin[idx].nodeServices[idx1].type = orgin[idx].data
              }
              delete orgin[idx].nodeServices[idx1].data
              if(orgin[idx].nodeServices[idx1].checked){
                delete orgin[idx].nodeServices[idx1].checked
              }
            }
          }
          if(orgin[idx].checked){
            delete orgin[idx].checked
          }
          if(orgin[idx].data){
            delete orgin[idx].data
          }
        }
        return orgin
      },
      //处理编辑节点回显
      handleEditProcessData(msg){
        let oMsg = JSON.parse(msg.processInfo)
        // console.log(oMsg)
        this.receiveDotData = this.handleCallbackFlowListData(oMsg)
        // console.log(this.receiveDotDataNum)
        
      },
      //处理编辑回显示节点process数据
      handleCallbackFlowListData(data){
        for(var idx = 0; idx < data.length; idx++) {
          data[idx].checked = true
          this.receiveDotDataNum.push(data[idx].index)
          this.receiveDotDataName.push(data[idx].name)
          if(data[idx].nodeServices){
            for(var idx1 in data[idx].nodeServices) {
              data[idx].nodeServices[idx1].checked = true
              if(data[idx].nodeServices[idx1].type){
                  data[idx].data = data[idx].nodeServices[idx1].type
              }
            }
          }
          
        }
        return data
      },
      //判断节点名称顺序是否相同
      nodeNameOrIndexUnique(arr,name,index){
        return new Promise((resove,reject)=>{
          var flag = null
          for(var i in arr){
            if(arr[i]['index'] == index || arr[i]['name'] == name){
              flag = true
            }
          }
         resove(flag)
        })
      },
      //获取用户对应部门弹出框提交给返回的数据
      modalFormOk (formData,status) {
        if(status == 0){  //新增
          this.addArrayUniqueFn(formData)
        }
        else if(status == 1){//编辑
          this.replaceArrayFn(formData)
        }

        this.receiveDotData.sort(this.sortFn('index'))
       }, 
      //新增去重
      addArrayUniqueFn(formData){
        this.receiveDotDataNum.indexOf(formData['index'])>-1 || this.receiveDotDataName.indexOf(formData['name'])>-1 ?  this.$message.error('节点重复') : this.receiveDotData.push(formData) && this.receiveDotDataNum.push(formData['index']) && this.receiveDotDataName.push(formData['name'])
      },
      //编辑替换
      replaceArrayFn(formData){
        // this.receiveDotData = this.receiveDotData.map( (item,i) => {
        //   console.log(item,formData)
        //   if(item.index === formData.index && item.name === formData.name){
        //     return this.addArrayUniqueFn(formData)
        //   }else{
        //     return (item.index === formData.index && item.name !== formData.name) || (item.index !== formData.index && item.name === formData.name) ? formData : item ;
        //   }
        // });
        for(var i=0;i< this.receiveDotData.length;i++){
          if(this.receiveDotData[i]['index'] == formData['index'] || this.receiveDotData[i]['name'] == formData['name']){
            this.receiveDotData.splice(i,1,formData)
          }
        }
      },
      //数组去重
      arrayUnique(arr,index, name) {
        var hash = {}
        return arr.reduce(function (item, next) {
          that.hash[next[index]] ? '' : that.hash[next[index]] = true && item.push(next)
          return item
        }, []);
      },
      //数组排序
      sortFn(prop){
         return function(a,b) {
            return a[prop] - b[prop];
        }
      },
      // 新增节点
      addNodeService(){
        if(this.flowNodeData.length<0){
          return false
        }
        this.$refs.collectionForm.add(this.flowNodeData);
      },
      // 删除节点
      delNodeService(item){
        this.removeArrayFn(item)
      },
      // 修改节点
      editNodeService(record){
       this.$refs.collectionForm.edit(record,this.flowNodeData);
      },
      //删除方法
      removeArrayFn(item){
        for(var i=0;i< this.receiveDotData.length;i++){
          if(this.receiveDotData[i].index == item.index ){
            this.receiveDotData.splice(i,1)
            this.receiveDotDataNum.splice(i,1)
            this.receiveDotDataName.splice(i,1)
          }
        }
      },
      edit (record) {
        this.model = record;
        this.form.resetFields();
        this.visible = true;
        this.$nextTick(() => {
          this.disabled = true
          this.form.setFieldsValue(pick(record,'collectionProcessNo','collectionProcessName','userType'));
          this.handleSelectChange(record.userType)
          this.handleEditProcessData(record)
        });
      },

      add () {
        this.model = {};
        this.form.resetFields();
        this.visible = true;
        this.$nextTick(() => {
          this.disabled = false
          this.form.setFieldsValue();
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.selectedRole = [];
      },
      handleSubmit () {
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            this.confirmLoading = true;
            let promiseFn;
            let getCheckedData = this.handleSubmitCheckedData(this.receiveDotData)
            let formData = Object.assign(values,{type:'2',processNodes: getCheckedData});
            if(!!this.model.id){ //编辑
              promiseFn = updateCollectionProcess(formData);
            }else{
              promiseFn = saveCollectionProcess(formData)
            }
            promiseFn.then((res)=>{
              if(res.status.statusCode == 0){
                this.$message.success(res.status.statusReason);
                this.$emit('ok');
              }else{
                this.$message.warning(res.status.statusReason);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
              this.reset()
            });
          }
        })
      },
      handleCancel () {
        this.close()
        this.reset()              

      },
       // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize(){
        let screenWidth = document.body.clientWidth;
        if(screenWidth < 500){
          this.drawerWidth = screenWidth;
        }else{
          this.drawerWidth = 700;
        }
      },
      reset(){
        this.receiveDotData = []
        this.config.typeTitle = ''
        this.config.subTypeTitle = ''
        this.showOtherInfo = false
        this.receiveDotDataNum = []
        this.receiveDotDataName = []
      }
    }
  }
</script>
<style scoped>
  .wrapperSlot >>> label {
    display: block;
  }
  .ant-spin-container >>> .ant-timeline-item{
    float: left;
    width: 20%;
  }
  .ant-spin-container >>> .ant-timeline-item-tail{
    top: 0.25em;
    width: 100%;
    border-top: 2px solid #e8e8e8;
  }
  .ant-spin-container >>> .ant-timeline-item-content{
    top: 10px;
    margin: 3px 0 0 -20px;
  }
  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>