layui-admin/admin/pages/step/index.html

@@include('./../../template/common/header.html', {
"title": "demo",
csslinks:['./../../static/css/step.css']
})
<div class="layui-iframe">
  @@include('./../../template/common/breadcrumb.html', {
  "title": "demo",
  subtitle:''
  })
  <div class="layui-fluid">
    <div class="layui-card table-box">


      <div class="layui-progress layui-progress-big" lay-filter="progress">
        <div class="step-box">
          <ul class="step-ul">
            <li class="active">1. 源及目标</li>
            <li>2. 选择对象</li>
            <li>3. 方式设置</li>
            <li>4. 完成</li>
          </ul>
        </div>
        <div class="layui-progress-bar" lay-percent="25%"><i class="active-after"></i></div>
      </div>
      <div class="step-content">

        <div class="step-1">
          <div class="layui-form dialog-form">
            <div class="layui-form-item">
              <label class="layui-form-label">名称：</label>
              <div class="layui-input-inline">
                <input type="text" name="taskName" required lay-verify="required" placeholder="请填入名称" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">备注：</label>
              <div class="layui-input-inline">
                <input type="text" name="remark" required lay-verify="required" placeholder="请填入备注" autocomplete="off"
                  class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">描述：</label>
              <div class="layui-input-inline">
                <input type="text" name="sourceDescription" required lay-verify="required" placeholder="描述"
                  autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item source-test">
              <label class="layui-form-label"></label>
              <div class="layui-input-inline">
                <div class="test-link-fail"><span class="icon"></span>连接失败</div>
                <div class="test-link-success"><span class="icon"></span>连接失败</div>
                <span class="test-link" onclick="testLink(this)">测试链接</span>
              </div>
            </div>
            <div class="layui-layer-btn">
              <button class="step-btn ml-10 reset-btn">取消</button>
              <button class="step-btn ml-10 submit-btn" lay-submit lay-filter="lay-step1-submit">
                下一步
              </button>
            </div>
          </div>
        </div>
        <div class="step-2  display-none">
          <div class="layui-form dialog-form">
            <div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-1">

              <div class="layui-transfer-box" data-index="0">
                <div class="layui-transfer-header">
                  <div class="layui-unselect" lay-skin="primary"><span>源库对象</span></div>
                </div>
                <ul class="layui-transfer-data">
                  <li class="tree-node"><i class="rw1"></i><i class="rw2"></i><span class="source-title"></span></li>
                  <li class="tree-node tree-node2"><i class="rw1"></i><i class="rw2"></i><span>tables</span></li>
                  <li>
                    <dl class="tree-node tree-list source-tree-list">
                    </dl>
                  </li>
                </ul>
              </div>

              <div class="layui-transfer-active">
                <div class="opr-box"> <i class="icon-next"></i>
                  <i class="icon-pre"></i></div>
              </div>

              <div class="layui-transfer-box" data-index="1">
                <div class="layui-transfer-header">
                  <div class="layui-unselect" lay-skin="primary"><span>已选择对象</span></div>
                </div>
                <ul class="layui-transfer-data">
                  <li class="tree-node tree-node2"><i class="rw2"></i><span>sales_order<em
                        class="total-nodes"></em></span></li>
                  <li>
                    <dl class="tree-node tree-list target-tree-list">
                    </dl>
                  </li>
                </ul>
              </div>

            </div>

            <div class="layui-layer-btn">
              <!-- <button class="step-btn ml-10 reset-btn">取消</button> -->
              <button class="step-btn ml-10 pre-btn" lay-submit lay-filter="lay-step2-pre-submit">
                上一步
              </button>
              <button class="step-btn ml-10 next-btn" lay-submit lay-filter="lay-step2-next-submit">
                下一步
              </button>
            </div>
          </div>
        </div>

        <div class="step-3 display-none">
          <div class="layui-form dialog-form">

            <div class="step3-form-item">
              <span class="step3-label">同步设置方式 ：</span>
              <div class="step3-chekbox-box layui-form-item">
                <input type="checkbox" name="ways[quanliang]" lay-skin="primary" title="全量数据初始化">
                <input type="checkbox" name="ways[zengliang]" lay-skin="primary" title="增量数据初始化" disabled="">
              </div>
            </div>

            <div class="layui-layer-btn">
              <button class="step-btn ml-10 pre-btn" lay-submit lay-filter="lay-step3-pre-submit">
                上一步
              </button>
              <button class="step-btn ml-10 next-btn" lay-submit lay-filter="lay-step3-next-submit">
                下一步
              </button>
            </div>
          </div>

        </div>

        <div class="step-4 display-none">
          <div class="dialog-form">
            <div class="progress-box">
              <div class="layui-progress">
                <div class="layui-progress-bar" lay-percent="80%"></div>
              </div>
              <div><span>预检查通过80%</span></div>
            </div>
            <table id="listTable" lay-filter="listTable" lay-size="lg"></table>
            <div class="step4-layer-btn">
              <button class="step-btn ml-10 next-btn" lay-submit lay-filter="lay-step4-next-submit">
                完成
              </button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <!-- 创建数据源 编辑数据源 -->
  <script type="text/html" id="formDialogTemplate">
  <div class="layui-form dialog-form" lay-filter="dialogForm">
    <div class="layui-form-item">
      <div class="msg-box"><span class="msg-icon">!</span><span>注意：编辑表名或列名后，目标数据库的库的表名列名将为修改后的名称。</span></div>
    </div>
    <div class="layui-form-item header-box">
      <label class="layui-form-label">数据库表名：</label>
      <div class="layui-input-inline">
        <input type="text" name="name" required lay-verify="required" placeholder="请填入数据源名称" autocomplete="off" class="layui-input">
        <span class="mark-icon">?</span>
      </div>
    </div>
    <div class="layui-form">
      <table id="editTable" lay-filter="editTable" lay-size="lg"></table>
    </div>
  </div>
</script>
  <script type="text/html" id="toolbarDemo">
  <div class="layui-layer-btn layui-layer-btn-r">
    <button class="layui-btn reset-btn" onclick="cancelDialog(this)">取消</button>
    <button  class="layui-btn layui-form-btn layui-btn-sm submit-btn" lay-event="getCheckData">确认</button>
  </div>
</script>


  @@include('./../../template/common/footer.html', {
  "jslinks": ['./../../static/js/step/index.js']
  })