细节处理

src/views/ajbzDetail.vue

@@ -21,8 +21,9 @@
         </div>
       </el-header>
       <el-main>
-        <el-row :gutter="10">
-          <el-col :span="15">
+        <el-row :gutter="10"
+                class="mainRow">
+          <el-col :span="14">
             <div class="grid-content bg-purple">
               <el-card class="box-card samlllCard"
                        :class="topSamllCard">
@@ -118,7 +119,7 @@
                      v-show="ry">
                   <div class="conTitle">
                     <div class="conTitleLeft conTitleleft"
-                         style="width:30%">
+                         style="width:40%">
                       <ul>
                         <li v-for="data in ryList"
                             :key="data.ryid"
@@ -145,7 +146,8 @@
                             <div class="block">
                               <el-avatar shape="square"
                                          :size="100"
-                                         :src="data.zp"></el-avatar>
+                                         fit="fill"
+                                         :src="'data:image/png;base64,' + data.zp"></el-avatar>
                             </div>
                           </div>
                         </td>
@@ -183,7 +185,8 @@
                             <div class="block">
                               <el-avatar shape="square"
                                          :size="100"
-                                         :src="data.zp"></el-avatar>
+                                         fit="fill"
+                                         :src="'data:image/png;base64,' + data.zp"></el-avatar>
                             </div>
                           </div>
                         </td>
@@ -231,7 +234,8 @@
                             <div class="block">
                               <el-avatar shape="square"
                                          :size="100"
-                                         :src="data.zp"></el-avatar>
+                                         fit="fill"
+                                         :src="'data:image/png;base64,' + data.zp "></el-avatar>
                             </div>
                           </div>
                         </td>
@@ -300,19 +304,22 @@
                         <li>受害人：</li>
                         <li v-for="data in shrList"
                             :key="data.rcdid">
-                          <span><i class="el-icon-phone"></i>{{data.gjc}}</span>
-                          <span>
+                          <span style="width:90%"><i class="el-icon-s-custom
+"></i>{{data.gjc}}</span>
+                          <span style="width:10%">
                             <i class="el-icon-delete"
                                v-show="delShow"
                                @click="hanlDelete(data.rcdid)"></i>
                           </span>
                         </li>
-                        <li style="margin-left:0">嫌疑人：</li>
+                        <li style="margin-left:0;background: none;">嫌疑人：</li>
                         <li v-for="data in xyrList"
                             :key="data.rcdid">
-                          <span><i class="el-icon-phone"></i>{{data.gjc}}</span>
+                          <span style="width:90%"><i class="el-icon-s-custom
+                              "></i>{{data.gjc}}</span>
                           <span v-show="delShow"
-                                @click="hanlDelete(data.rcdid)">
+                                @click="hanlDelete(data.rcdid)"
+                                style="width:10%">
                             <i class="el-icon-delete"></i>
                           </span>
                         </li>
@@ -376,7 +383,7 @@
               </el-col>
             </el-row>
           </el-col>
-          <el-col :span="9">
+          <el-col :span="10">
             <div class="grid-content bg-purple">
               <el-card v-if="!bzFlag"
                        class="box-card">
@@ -453,21 +460,23 @@
                 </div>
                 <div class="incidentCon">
                   <div class="bztag-wrap">
-                    <div class="bztag">
+                    <div class="bztag"
+                         v-show="bzxqtag1">
                       <span>{{ ajzlbStr }}</span>
                     </div>
                     <div class="bztag2"
-                         style="margin: 40px 0 0 60px">
+                         style="margin: 40px 0 0 60px"
+                         v-show="bzxqtag2">
                       <span>{{ ajxzlbStr }}</span>
                     </div>
                   </div>
                 </div>
-                <div class="wcbzButton">
+                <!-- <div class="wcbzButton">
                   <el-button type="primary"
                              @click="submitBz">完成标注</el-button>
                   <el-button type="warning"
                              @click="bzDetail">查看标注详情</el-button>
-                </div>
+                </div> -->
               </el-card>
             </div>
           </el-col>
@@ -574,6 +583,8 @@ export default {
           rylx: "",
         },
       ],
+      bzxqtag1: true,
+      bzxqtag2: true,
       ajxzlbStr: "",
       ajzlbStr: "",
       bzFlag: false,
@@ -630,7 +641,7 @@ export default {
       Amplifier: true,
       delShow: false,
       selectIndex: 1, //搜索结果,被选中的li index
-      selectIndex1: 1,
+      selectIndex1: 0,
       selectIndex2: 1,
       word: [],
       FwbzhList: [],
@@ -709,27 +720,57 @@ export default {
   },
   methods: {
     submitBz () {
-      var self = this;
-      saveAsjbzxx({
-        asjbh: self.asjbh,
-        bzzt: "1",
-        asjbzAjfl: `0${self.selectIndex1}`,
-        ajzlb: self.data1[0].id,
-        ajxzlb: self.parentLb.id,
-      }).then(res => {
-        if (res.status == 200) {
-          self.$message.success('标注成功')
-        }
-      })
+
+      this.$confirm('此操作将进行案件标注, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        var self = this;
+        saveAsjbzxx({
+          asjbh: self.asjbh,
+          bzzt: "1",
+          asjbzAjfl: `0${self.selectIndex1}`,
+          ajzlb: self.data1[0].id,
+          ajxzlb: self.parentLb.id,
+        }).then(res => {
+          console.log(res)
+          if (res.status == 200) {
+            self.$message.success('标注成功')
+          } else {
+            self.$message.error('标注失败')
+          }
+        })
+        //   this.$message({
+        //     type: 'success',
+        //     message: '删除成功!'
+        //   });
+        // }).catch(() => {
+        //   this.$message({
+        //     type: 'info',
+        //     message: '已取消删除'
+        //   });
+      });
+
     },
     getBz () {
       var self = this;
       getAsjbzxx({
         asjbh: this.asjbh,
       }).then((res) => {
+        console.log(res, '111111')
         self.ajzlbStr = res.data.ajzlbStr;
         self.ajxzlbStr = res.data.ajxzlbStr;
-
+        if (self.ajzlbStr == "" || self.ajzlbStr == null || self.ajzlbStr == undefined) {
+          self.bzxqtag1 = false
+        } else {
+          self.bzxqtag1 = true
+        }
+        if (self.ajxzlbStr == "" || self.ajxzlbStr == null || self.ajxzlbStr == undefined) {
+          self.bzxqtag2 = false
+        } else {
+          self.bzxqtag2 = true
+        }
         self.$nextTick(() => {
           // treeBox 元素的ref   value 绑定的node-key
           self.$refs.tree1.setCurrentKey(res.data.ajzlb);
@@ -841,7 +882,7 @@ export default {
         }).then((res) => {
 
           this.xyrList1 = res.data
-          console.log(this.xyrList1, "11111")
+          console.log(this.xyrList1, "1765111")
 
         }),
         getGjcList({
@@ -1133,6 +1174,8 @@ export default {
   border-top: none;
   height: 800px;
   margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
 }
 .el-footer {
   text-align: center;
@@ -1160,13 +1203,13 @@ export default {
 }
 
 .leftBar {
-  width: 170px;
+  width: 20%;
   height: 540px;
   background: #dcdcdc;
   border-radius: 4px 0px 0px 4px;
 }
 .rightBar {
-  width: 100%;
+  width: 80%;
   height: 540px;
 }
 .leftBar ul {
@@ -1176,7 +1219,7 @@ export default {
   padding-left: 20px;
 }
 .leftBar ul li {
-  width: 130px;
+  width: 100%;
   height: 36px;
   text-align: center;
   border-radius: 4px 0px 0px 4px;
@@ -1201,7 +1244,7 @@ export default {
   justify-content: space-between;
 }
 .conContioner {
-  width: 920px;
+  width: 100%;
   height: 415px; //488
   margin: 15px auto;
   overflow: hidden;
@@ -1301,16 +1344,25 @@ export default {
 }
 .keywordCon ul li:nth-child(1) {
   margin-left: 0;
+  background: none;
 }
 .keywordCon ul li {
-  width: 86%;
+  width: 82%;
   font-size: 14px;
   font-weight: 400;
-  height: 50px;
+  height: 35px;
   margin-left: 40px;
-  line-height: 50px;
+  line-height: 35px;
   display: flex;
+  margin-bottom: 10px;
   justify-content: space-between;
+  background: #e9e6e6;
+  border-radius: 2px;
+}
+.keywordCon ul li span {
+  display: block;
+  width: 100%;
+  margin-left: 5px;
 }
 .el-tag {
   margin-left: 15px;
@@ -1380,6 +1432,12 @@ export default {
   line-height: 32px;
   cursor: pointer;
 }
+/deep/ .el-avatar > img {
+  width: 100%;
+  display: block;
+  height: 100%;
+  vertical-align: middle;
+}
 .incidentCon {
   width: 100%;
 
@@ -1389,12 +1447,11 @@ export default {
 }
 .incidentConLeft,
 .incidentConRight {
-  width: 48%;
-
-  margin: 24px;
+  width: 46%;
+  margin: 13px;
 }
 .search {
-  width: 90%;
+  width: 95%;
   height: 34px;
   display: flex;
   justify-content: space-between;
@@ -1439,7 +1496,7 @@ export default {
 }
 .bshTable {
   display: block;
-  width: 960px;
+  width: 100%;
   border-collapse: collapse;
   text-align: center;
   height: 300px;
@@ -1447,7 +1504,7 @@ export default {
 .bshTable tbody {
   margin-top: 10px;
   display: block;
-  width: 950px;
+  width: 100%;
   height: 235px;
   overflow: hidden;
   overflow-y: auto;
@@ -1467,8 +1524,11 @@ export default {
   border-radius: 10px;
   background: #ededed;
 }
+.el-avatar > img {
+  width: 100%;
+}
 .bshTable th {
-  width: 232px;
+  width: 24%;
   height: 50px;
   background: #dcdcdc;
 }
@@ -1505,4 +1565,7 @@ export default {
   top: 750px;
   text-align: center;
 }
+.mainRow {
+  width: 100%;
+}
 </style>

src/views/cbyp/cbaAdd.vue

@@ -2,56 +2,283 @@
   <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>
   </div>
 </template>
  
  <script>
-export default {};
-</script>
- 
- <style lang='scss'>
-  .topTitle {
-    width: 100%;
-    height: 56px;
-    background: #1F212C;
-    display: flex;
-    align-items: center;
-
-    span {
-      font-size: 18px;
-      font-weight: bold;
-      line-height: 24px;
-      color: #FFFFFF;
-      margin-left: 35px;
+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 () {
 
-    .subTitle {
-      width: 138px;
-      margin-left: 90px;
-      text-align: center;
-      margin-top: 19px;
-
-      .ajTitle {
-        font-size: 14px;
-        font-weight: 400;
-        color: #FFFFFF;
-        opacity: 0.8;
-      }
+  },
+  methods: {
+    halderTab (val) {
+      this.selectIndex = val
+    },
+    removeDomain (domain) {
 
-      .bottom {
-        height: 4px;
-        background: #F1970F;
-        opacity: 1;
-        margin-top: 7px;
+    },
+    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 {
+  width: 100%;
+  height: 56px;
+  background: #1f212c;
+  display: flex;
+  align-items: center;
+
+  span {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 24px;
+    color: #ffffff;
+    margin-left: 35px;
+  }
+}
+.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;
+  line-height: 40px;
+  margin-top: 10px;
+  font-size: 14px;
+  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