add.html 24.6 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('新增定制模版')"/>
  <script th:src="@{/js/vue.js}"></script>
  <script th:src="@{/js/elementNew.js}"></script>
  <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
  <link rel="stylesheet" th:href="@{/css/elementNew.css}">
<!--  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
</head>
<body class="white-bg">
  <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
    <el-form :model="form" label-width="100px" class="demo-form" :rules="rules" ref="form">
      <el-form-item label="模版名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="所属企业">
        {{form.orgName}}
        <el-button type="primary" @click="selectDeptTree">选择企业</el-button>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio label="0">启用</el-radio>
          <el-radio label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-for="(item, index) in form.arrayContents">
        <el-row>
          <el-col :span="item.name === '摘要' ? 24 : 4">
            <el-form-item :label="item.name" :prop="`arrayContents.${index}.yesChecked`">
              <template v-if="item.name === '摘要'">
                <div v-if="zyList.length > 0">
                  经营信息：
                  <el-tag v-for="item in zyList" style="margin-right: 10px">{{item}}</el-tag>
                </div>
                <div v-if="zySecondList.length > 0">
                  公共记录：
                  <el-tag v-for="item in zySecondList" style="margin-right: 10px">{{item}}</el-tag>
                </div>
              </template>
              <el-checkbox v-model="item.yesChecked" label="true" :indeterminate="item.yesIndeterminate" @change="secondSelect(1)">
                {{item.name === '摘要' || item.name === '授信类型' || (item.name === '财务状况' && item.options === '无财务') ? '':'全选'}}
              </el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :prop="`arrayContents.${index}.idx`" class="form-inline" v-if="item.name !== '摘要'" label-width="20px">
              <el-input v-model="item.idx" placeholder="请输入编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" v-if="item.radio">
            <el-form-item :prop="`arrayContents.${index}.options`" class="form-inline" label-width="20px">
              <el-radio-group v-model="item.options" @input="handleRadioChange(index)">
                <el-radio v-for="radio in item.radio.split(',')" :label="radio">{{radio}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="10" v-if="item.checkBox">
            <el-form-item :prop="`arrayContents.${index}.options`" class="form-inline" label-width="20px">
              <el-checkbox-group v-model="item.optionsArr" @change="handleCheckbox">
                <el-checkbox v-for="checkBox in item.checkBox.split(',')" :label="checkBox" :readonly="checkBox ==='信用级别'">{{checkBox}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="item.list">
          <template v-for="(list, listIndex) in item.list">
            <el-row>
              <el-col :span="6" :offset="1">
                <el-form-item :prop="`arrayContents.${index}.list.${listIndex}.yesChecked`">
                  <el-checkbox v-model="list.yesChecked" :indeterminate="list.yesIndeterminate" label="true" :disabled="list.disabled" @change="secondSelect(2)">{{list.name}}</el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="2"  v-if="['经营信息','公共记录'].includes(item.name)">
                <el-form-item :prop="`arrayContents.${index}.list.${listIndex}.haveZY`" class="form-inline" label-width="0px">
                  <el-checkbox v-model="list.haveZY" @change="handleChoiceZy" :disabled="list.disabledZy">摘要</el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item :prop="`arrayContents.${index}.list.${listIndex}.idx`" label-width="0px">
                  <el-input v-model="list.idx" style="width: 100%" placeholder="请输入编号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <template v-if="list.list">
              <el-row>
                <template v-for="(sonList, sonIndex) in list.list">
                    <el-col :span="['经营信息','公共记录'].includes(item.name) ? 5 : 7" :offset="sonIndex%2 === 0 ? 2 : 0">
                      <el-form-item :prop="`arrayContents.${index}.list.${listIndex}.list.${sonIndex}.yesChecked`">
                        <el-checkbox v-model="sonList.yesChecked" label="true" @change="secondSelect(3)">{{getName(sonList.name)}}</el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"  v-if="['经营信息','公共记录'].includes(item.name)">
                      <el-form-item :prop="`arrayContents.${index}.list.${listIndex}.list.${sonIndex}.haveZY`" class="form-inline" label-width="0px">
                        <el-checkbox v-model="sonList.haveZY" @change="handleChoiceZy" :disabled="sonList.disabledZy">摘要</el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3">
                      <el-form-item :prop="`arrayContents.${index}.list.${listIndex}.list.${sonIndex}.idx`" label-width="0px">
                        <el-input v-model="sonList.idx" placeholder="请输入编号"></el-input>
                      </el-form-item>
                    </el-col>
                </template>
              </el-row>
            </template>
          </template>
        </template>
      </template>
    </el-form>
  </div>
<div th:include="include::footer"></div>
<script type="text/javascript" th:inline="javascript">
  var prefix = ctx + "business/customTemplate"
  // let modelConfig = [[${modelConfig}]]

  var app = new Vue({
    el: '#app',
    data() {
      return {
        form: {
          arrayContents: [],
          orgId: "",
          orgName: "",
          name: "",
          status: "0",
        },
        rules: {
          name: [
            { required: true, message: '请输入模版名称', trigger: 'blur' }
          ]
        },
        modelConfigList: [],
        curLevel: 1,
        zyList: [],
        zySecondList: [],
      }
    },
    mounted() {
      this.init()
    },
    computed: {
    },
    watch: {
    },
    methods: {
      init() {
        let _this = this
        $.ajax({
          type: "get",
          url: "/business/templateDataSource/getModelConfig",
          contentType: "application/json",
          success: function (response) {
            console.log(response)
            _this.modelConfigList = response.data
            _this.form.arrayContents = response.data
            _this.form.arrayContents.forEach(function (item, index) {
              item.yesIndeterminate = false
              item.idx = index
              if (item.name === '风险评定') {
                item.checkBox = '违约率,信用评分和信用级别'
                item.optionsArr = []
                _this.handleCheckbox()
              }
              if (item.name === '财务状况') {
                item.options = '无财务'
                _this.handleRadioChange(index)
              }
              if (item.name === '授信类型') {
                if (item.yesChecked) {
                  item.options = '基础授信额度'
                } else {
                  item.options = ''
                }
              }
              if (item.list) {
                item.list.forEach(function (list, listIndex) {
                  list.yesIndeterminate = false
                  if (list.yesChecked) {
                    list.disabledZy = false
                  }
                  list.idx = index+'.'+(listIndex+1)
                  if (list.list) {
                    list.list.forEach(function (sonList, sonIndex) {
                      if (sonList.yesChecked) {
                        sonList.disabledZy = false
                      }
                      sonList.yesIndeterminate = false
                      sonList.idx = index+'.'+(listIndex+1)+'.'+(sonIndex+1)
                    })
                  }
                })
              }
            })

            console.log(_this.form.arrayContents)
          }
        })
      },
      secondSelect(val) {
        this.curLevel = val
        let _this = this
        console.log(this.curLevel)
        this.form.arrayContents.forEach(function (item) {
          if (item.name === '风险评定') {
            if (item.yesChecked) {
              item.yesIndeterminate = false
              item.optionsArr = ['违约率','信用评分和信用级别']
            } else {
              if  (item.yesIndeterminate){

              } else {
                item.optionsArr = []
              }
            }
          }

          if (item.name === '授信类型') {
            if (item.yesChecked) {
              item.yesIndeterminate = false
              item.options = '基础授信额度'
            } else {
              if  (item.yesIndeterminate){
              } else {
                item.options = ''
              }
            }
          }

          if (item.list) {
            let isAllChecked = true
            let listFirstSelectCount = 0
            let haveOneFalseCount = 0
            // 第一级
            if (_this.curLevel === 1) {
              if (item.yesChecked) {
                item.yesIndeterminate = false
                // 第二级
                item.list.forEach(function (list) {
                  if (!list.disabled) {
                    list.yesChecked = true
                    list.yesIndeterminate = false
                  }
                  list.disabledZy = false
                  if (list.list) {
                    // 第三级
                    list.list.forEach(function (sonList) {
                      sonList.yesChecked = true
                      sonList.disabledZy = false
                    })
                  }
                })
              } else {
                if  (item.yesIndeterminate){
                  // item.yesChecked = true
                  // item.yesIndeterminate = false

                } else {
                  // 第二级
                  item.list.forEach(function (list) {
                    list.yesChecked = false
                    list.disabledZy = true
                    list.haveZY = false
                    if (list.list) {
                      // 第三级
                      list.list.forEach(function (sonList) {
                        sonList.yesChecked = false
                        sonList.disabledZy = true
                        sonList.haveZY = false
                      })
                    }
                  })
                }
              }
            }
            // 第二级
            item.list.forEach(function (list) {
              if (list.list) {
                // 点击第二级的时候，第三级的选中状态要跟着改变
                if (_this.curLevel === 2) {

                  // 设置复选框
                  if (list.yesChecked) {
                    list.yesIndeterminate = false
                    // 第三级
                    list.list.forEach(function (sonList) {
                      sonList.yesChecked = true
                      sonList.disabledZy = false
                    })
                  } else {
                    // 第三级
                    if (list.yesIndeterminate) {
                      // list.yesChecked = true
                      // list.yesIndeterminate = false
                    } else {
                      list.list.forEach(function (sonList) {
                        sonList.yesChecked = false
                        sonList.disabledZy = true
                        sonList.haveZY = false
                      })
                    }
                  }
                }
                // 点击第三级的时候，第二级的选中状态要跟着改变
                if (_this.curLevel === 3) {
                  let isAllSonChecked = true
                  let listSelectCount = 0
                  list.list.forEach(function (sonList) {
                    if (!sonList.yesChecked) {
                      listSelectCount++
                      isAllSonChecked = false
                      sonList.disabledZy = true
                      sonList.haveZY = false
                    } else {
                      sonList.disabledZy = false
                    }
                  })

                  list.yesIndeterminate = listSelectCount > 0 && listSelectCount < list.list.length
                  list.yesChecked = isAllSonChecked
                }
              }
              if (list.yesChecked || list.yesIndeterminate) {
                if (item.name === '经营信息') {
                  console.log("实时经营信息数量",_this.zyList.length)
                  if (_this.zyList.length < 8) {
                    list.disabledZy = false
                  }
                }
                if (item.name === '公共记录') {
                  if (_this.zySecondList.length < 8) {
                    list.disabledZy = false
                  }
                }
              } else {
                list.disabledZy = true
                list.haveZY = false
              }
              if (!list.yesChecked) {
                isAllChecked = false
                haveOneFalseCount++
              }
              if (list.yesIndeterminate) {
                listFirstSelectCount++
              }
            })
            item.yesChecked = isAllChecked
            item.yesIndeterminate = (listFirstSelectCount > 0) || (haveOneFalseCount > 0 && haveOneFalseCount < item.list.length)
          }
        })
        console.log(this.form.arrayContents)
        this.handleChoiceZy()
      },
      handleRadioChange(index) {
        if (this.form.arrayContents[index].name === '财务状况') {
          if (this.form.arrayContents[index].options === '无财务') {
            this.form.arrayContents[index].list.forEach(function (item) {
              item.yesChecked = false
              item.disabled = true
            })
          } else {
            this.form.arrayContents[index].list.forEach(function (item) {
              item.yesChecked = true
              item.disabled = false
            })
            if (this.form.arrayContents[index].options === '大数') {
              this.form.arrayContents[index].yesIndeterminate = true
              this.form.arrayContents[index].yesChecked = false
              this.form.arrayContents[index].list.forEach(function (item) {
                if (item.name === '财务数据') {
                  item.disabled = true
                  item.yesChecked = false
                  item.idx = ''
                }
              })
            } else {
              this.form.arrayContents[index].yesIndeterminate = false
              this.form.arrayContents[index].yesChecked = true
            }
            let itemIndex = 0
            this.form.arrayContents[index].list.forEach(function (item) {
              if (!item.disabled) {
                itemIndex++
                item.idx = index+'.'+itemIndex
              }
            })
          }
        }
      },
      handleCheckbox() {
        this.form.arrayContents.forEach(function (item) {
          if (item.name === '风险评定') {
            if (item.optionsArr.length === 0) {
              item.yesChecked = false
              item.yesIndeterminate = false
            } else if (item.optionsArr.length === 2) {
              item.yesChecked = true
              item.yesIndeterminate = false
            } else {
              item.yesChecked = false
              item.yesIndeterminate = true
            }
          }
        })
      },
      selectDeptTree() {
        let deptId = this.form.orgId ? this.form.orgId : 23
        var url = ctx + "business/frontDept/selectDeptTree/" + deptId;
        console.log(url)
        var options = {
          title: '选择部门',
          width: "380",
          url: url,
          expandLevel: 0,
          callBack: this.doSubmit
        };
        $.modal.openOptions(options);
      },
      doSubmit(index, layero){
        var body = layer.getChildFrame('body', index);
        this.form.orgId = body.find('#treeId').val();
        this.form.orgName = body.find('#treeName').val();
        layer.close(index);
      },
      getName(name){
        if (name.length > 7) {
          return name.substring(0, 7) + '...'
        } else {
          return name
        }
      },

      //点击摘要方法
      handleChoiceZy() {
        this.zyList = []
        this.zySecondList = []
        let _this = this
        this.form.arrayContents.forEach(function (item) {
          if (item.list) {
            item.list.forEach(function (list) {
              // 第二级
              if (list.haveZY) {
                if (item.name === '经营信息') {
                  // 选择的经营信息
                  _this.zyList.push(list.name)
                } else {
                  // 选择的公共记录
                  _this.zySecondList.push(list.name)
                }
              }
              if (list.list) {
                // 第三级
                list.list.forEach(function (sonList) {
                  if (sonList.haveZY) {
                    if (item.name === '经营信息') {
                      _this.zyList.push(sonList.name)
                    } else {
                      _this.zySecondList.push(sonList.name)
                    }
                  }
                })
              }
            })
          }
        })

        // 设置禁用
        this.form.arrayContents.forEach(function (item) {
          if (item.list) {
            // 设置第二层禁用
            item.list.forEach(function (list) {
              if (item.name === "经营信息") {
                console.log(_this.zyList.length)
                if (_this.zyList.length >= 8) {
                  if (!list.haveZY) {
                    list.disabledZy = true
                  }
                } else {
                  if (list.yesChecked || list.yesIndeterminate) {
                    if (_this.zyList.length < 8) {
                      list.disabledZy = false
                    }
                  }
                }
              }
              if (item.name === "公共记录") {
                if (_this.zySecondList.length >= 8) {
                  if (!list.haveZY) {
                    list.disabledZy = true
                  }
                } else {
                  if (list.yesChecked || list.yesIndeterminate) {
                    if (_this.zySecondList.length < 8) {
                      list.disabledZy = false
                    }
                  }
                }
              }
              if (list.list) {
                // 设置第三层禁用
                list.list.forEach(function (sonList) {
                  if (item.name === "经营信息") {
                    if (_this.zyList.length >= 8) {
                      if (!sonList.haveZY) {
                        sonList.disabledZy = true
                      }
                    } else {
                      if (_this.zyList.length < 8 && (sonList.yesChecked || sonList.yesIndeterminate)) {
                        sonList.disabledZy = false
                      }
                      //控制选了二级不能选三级，并且把三级已经勾选的去掉
                      if (list.haveZY) {
                        sonList.disabledZy = true
                        if (_this.zyList.includes(sonList.name)) {
                          sonList.haveZY = false
                          _this.zyList.splice(_this.zyList.indexOf(sonList.name), 1)
                        }
                      } else {
                        sonList.disabledZy = false
                      }
                      //控制选了三级不能选二级，并且把二级已经勾选的去掉
                      if (sonList.haveZY) {
                        list.disabledZy = true
                        if (_this.zyList.includes(list.name)) {
                          list.haveZY = false
                          _this.zyList.splice(_this.zyList.indexOf(list.name), 1)
                        }
                      }
                    }
                  }
                  if (item.name === "公共记录") {
                    if (_this.zySecondList.length >= 8) {
                      if (!sonList.haveZY) {
                        sonList.disabledZy = true
                      }
                    } else {
                      if (_this.zySecondList.length < 8 && (sonList.yesChecked || sonList.yesIndeterminate)) {
                        sonList.disabledZy = false
                      }
                      if (list.haveZY) {
                        sonList.disabledZy = true
                        if (_this.zySecondList.includes(sonList.name)) {
                          sonList.haveZY = false
                          _this.zySecondList.splice(_this.zySecondList.indexOf(sonList.name), 1)
                        }
                      } else {
                        sonList.disabledZy = false
                      }
                      //控制选了三级不能选二级，并且把二级已经勾选的去掉
                      if (sonList.haveZY) {
                        list.disabledZy = true
                        if (_this.zySecondList.includes(list.name)) {
                          list.haveZY = false
                          _this.zySecondList.splice(_this.zySecondList.indexOf(list.name), 1)
                        }
                      }
                    }
                  }
                })
              }
            })
          }
        })

        console.log(this.form.arrayContents)
      },
      submitForm(formName, callback) {
        console.log(this.form)
        this.$refs["form"].validate((valid) => {
          if (this.form.arrayContents) {
            this.form.arrayContents.forEach(function (item) {
              item.checked = false
              if (item.yesChecked || item.yesIndeterminate) {
                item.checked = true
                if (item.name === '风险评定') {
                  if (item.optionsArr.includes('信用评分和信用级别')) {
                    if (item.optionsArr.includes('违约率')) {
                      item.optionsArr = ['违约率', '信用评分', '信用级别']
                    } else {
                      item.optionsArr = ['信用评分', '信用级别']
                    }
                  }
                }
              }
              if (item.list) {
                item.list.forEach(function (list) {
                  list.checked = false
                  if (list.yesChecked || list.yesIndeterminate) {
                    list.checked = true
                  }
                  if (list.list) {
                    list.list.forEach(function (sonList) {
                      sonList.checked = false
                      if (sonList.yesChecked || sonList.yesIndeterminate) {
                        sonList.checked = true
                      }
                    })
                  }
                })
              }
            })
          }
          if (valid) {
            callback && callback(this.form)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  })

  function submitHandler() {
    app.submitForm('form', function (data) {
      $.modal.loading("正在处理中，请稍后...");
      $.modal.disable();
      $.ajax({
        type: "post",
        url: prefix + "/addTemplate",
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        data: JSON.stringify(data),
        success: function (r) {
          console.log(r)
          $.modal.closeLoading()
          $.modal.enable()
          if (r.code === 2000) {
            $.modal.msgReload("保存成功", modal_status.SUCCESS);
            // $.operate.successCallback(r);
            setTimeout(function () {
              $.modal.close();
            }, 1000)
          } else {
            $.modal.msgError(r.msg)
          }
        }
      })
    })
  }
</script>
</body>
</html>