细节处理

src/views/cbyp/cbaAdd.vue

@@ -2,11 +2,101 @@
   <div class="cbaAdd">
     <div class="topTitle">
       <span>串并案件新增</span>
-      <!-- <div class="subTitle">
-        <div class="ajTitle">案件标注信息</div>
-        <div class="bottom"></div>
-      </div> -->
     </div>
+    <el-card class="box-card">
+      <el-form label-width="150px"
+               :model="formLabelAlign"
+               class="formData demo-dynamic">
+        <el-form-item label="串并名称:">
+          <div class="form-item">
+            <div style="
+            width:58%">
+              <el-input v-model="formLabelAlign.region"></el-input>
+            </div>
+            <div style="
+            width:18%">
+              <el-button type="primary">生成名称</el-button>
+            </div>
+            <div style="
+            width:18%">
+              <el-button type="danger">重置</el-button>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="串并类型:">
+
+          <el-select v-model="formLabelAlign.region"
+                     placeholder="请选择"
+                     style="width: 58%;margin-left: 6px;height:40px">
+            <el-option v-for="item in options"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+
+        </el-form-item>
+        <el-form-item label="串并依据描述:">
+
+          <el-input type="textarea"
+                    v-model="formLabelAlign.type"
+                    class="longText"></el-input>
+        </el-form-item>
+        <el-form-item class="itemBtn">
+          <el-button type="primary"
+                     @click="onSubmit">确定</el-button>
+          <el-button>取消</el-button>
+        </el-form-item>
+      </el-form>
+
+    </el-card>
+    <el-card class="box-card bottomCard"
+             style="height:700px">
+      <div class="bottomTitle">
+        <div class="titleTab">
+          <ul>
+            <li v-for="item in tabData"
+                :key="item.id"
+                ref="item.id"
+                :class="{ active: selectIndex === item.id }"
+                @click="halderTab(item.id)">
+              {{item.value}}
+            </li>
+          </ul>
+        </div>
+        <div class="contioner">
+          <div style="width:100%;height:60px">
+            <el-button type="danger"
+                       style="margin:10px;">删除案件</el-button>
+          </div>
+          <div class="tabList">
+            <el-table ref="multipleTable"
+                      :data="tableData"
+                      tooltip-effect="dark"
+                      @selection-change="handleSelectionChange"
+                      class="tableList">
+              <el-table-column type="selection"
+                               width="55">
+              </el-table-column>
+              <el-table-column label="序号"
+                               width="120">
+                <template slot-scope="scope">{{ scope.row.date }}</template>
+              </el-table-column>
+              <el-table-column prop="name"
+                               label="姓名"
+                               width="120">
+              </el-table-column>
+              <el-table-column prop="address"
+                               label="地址"
+                               show-overflow-tooltip>
+              </el-table-column>
+            </el-table>
+          </div>
+
+        </div>
+      </div>
+
+    </el-card>
     <div>
 
     </div>
@@ -14,14 +104,95 @@
 </template>
  
  <script>
-export default {};
+export default {
+  name: "cbaAdd",
+  data () {
+    return {
+      formLabelAlign: {
+        name: '',
+        region: '',
+        type: ''
+      },
+      selectIndex: 1,
+      options: [],
+      tabData: [{
+        id: 1,
+        value: "相关案件"
+      },
+      {
+        id: 2,
+        value: "添加案件"
+      },
+      {
+        id: 3,
+        value: "我的收藏案件"
+      }],
+      tableData: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
+
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    halderTab (val) {
+      this.selectIndex = val
+    },
+    removeDomain (domain) {
+
+    },
+    onSubmit () {
+
+    },
+    toggleSelection (rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange (val) {
+      this.multipleSelection = val;
+    }
+  }
+};
 </script>
  
  <style lang='scss'>
-  .topTitle {
+.topTitle {
   width: 100%;
   height: 56px;
-    background: #1F212C;
+  background: #1f212c;
   display: flex;
   align-items: center;
 
@@ -29,29 +200,85 @@ export default {};
     font-size: 18px;
     font-weight: bold;
     line-height: 24px;
-      color: #FFFFFF;
+    color: #ffffff;
     margin-left: 35px;
   }
-
-    .subTitle {
-      width: 138px;
-      margin-left: 90px;
+}
+.box-card {
+  margin: 20px;
+  height: 287px;
+}
+.formData {
+  width: 50%;
+  margin: 0 auto;
+}
+.form-item {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+.longText textarea {
+  margin-left: 6px;
+  padding: 0 15px;
+  min-height: 60px !important;
+  width: 58%;
+}
+.itemBtn .el-form-item__content {
+  margin-left: 230px !important;
+}
+.bottomCard {
+  border: 0 !important;
+}
+.bottomCard .el-card__body {
+  padding: 0 !important;
+}
+.bottomTitle {
+  width: 100%;
+  height: 50px;
+  background: #efefef;
+}
+.titleTab {
+  width: 400px;
+  height: 50px;
+}
+.titleTab ul {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+}
+.titleTab ul li {
+  width: 33%;
+  height: 40px;
   text-align: center;
-      margin-top: 19px;
-
-      .ajTitle {
+  line-height: 40px;
+  margin-top: 10px;
   font-size: 14px;
-        font-weight: 400;
-        color: #FFFFFF;
-        opacity: 0.8;
-      }
-
-      .bottom {
-        height: 4px;
-        background: #F1970F;
-        opacity: 1;
-        margin-top: 7px;
-      }
-    }
-  }
+  cursor: pointer;
+}
+.active {
+  background: #ffffff;
+}
+.contioner {
+  width: 100%;
+  height: 560px;
+}
+.tabList {
+  width: 100%;
+}
+.tableList {
+  border: 1px solid #ebeef5;
+  width: 92%;
+  margin: 0 auto;
+}
+.tableList th {
+  background: #ebeef5;
+  text-align: center;
+}
+.tableList td {
+  text-align: center;
+}
+.tableList tr:nth-child(2n) {
+  background: #ebeef5;
+}
 </style>
\ No newline at end of file