Merge branch 'master' of http://192.168.60.201/root/dsk-operate-sys

dsk-operate-ui/src/assets/styles/index.scss

@@ -494,6 +494,14 @@ ul, li {
     width: 16px;
   }
 }
+.btnsmall{
+  display: inline-block;
+  font-size: 12px;
+  border-radius: 2px;
+  width: 72px;
+  text-align: center;
+  margin: 0 4px;
+}
 .btn_default{
   border: 1px solid #0081FF;
   color: #0081FF;
@@ -527,6 +535,25 @@ ul, li {
     background-color: #006AD1;
   }
 }
+.btn_cancel{
+  border: 1px solid #CCCCCC;
+  color: #4f4f4f;
+  &.h28{
+    line-height: 26px;
+  }
+  &.h32 {
+    line-height: 30px;
+  }
+  &.h34{
+    line-height: 32px;
+  }
+  &:hover{
+    color: #4f4f4f;
+    border-color: #CCCCCC;
+    background-color: #F4F4F4;
+  }
+}
+
 //搜索框
 .searchInput{
   width: 590px;
@@ -556,3 +583,34 @@ ul, li {
     }
   }
 }
+//导出EXCEL
+.btn-export{
+  display: inline-block;
+  color: #232323;
+  font-size: 14px;
+  height: 24px;
+  line-height: 24px;
+  cursor: pointer;
+  img{
+    margin-right: 5px;
+    float: left;
+    width: 18px;
+    height: 18px;
+    margin-top: 2px;
+  }
+  &:hover{
+    color: #0081FF;
+  }
+}
+//有链接字体颜色
+.wordprimary{
+  color: #0081FF;
+  cursor: pointer;
+}
+//分割线
+.el-divider--horizontal{
+  margin: 0;
+}
+.el-divider{
+  background-color: #efefef;
+}

dsk-operate-ui/src/views/project/projectList/index.vue

@@ -6,34 +6,82 @@
         <div class="btn btn_primary h28"><div class="img img2"></div>批量导出</div>
       </div>
       <el-tabs v-model="activeName" @tab-click="handleClick" class="tabpane w100">
-        <el-tab-pane label="我参与的项目" name="first">
-          <div class="searchInput">
-            <el-input type="text" placeholder="请输入项目或业主单位名称关键词进行搜索"></el-input>
-            <div class="btn">搜索</div>
-          </div>
-          <div class="sellist">
-            <div class="selli">
+        <el-tab-pane label="我参与的项目" name="first"></el-tab-pane>
+        <el-tab-pane label="公司全部项目" name="second"></el-tab-pane>
+
+        <div class="searchInput">
+          <el-input type="text" placeholder="请输入项目或业主单位名称关键词进行搜索"></el-input>
+          <div class="btn">搜索</div>
+        </div>
+        <div class="sellist">
+          <div class="selli">
               <span>
               地区团队
-              </span>aaa
-            </div>
-            <div class="selli">
+              </span>
+              <div class="selectInput" @click="getxmdq"><span class="selecttext">{{xmdqlabel}}<i class="el-icon-caret-bottom"></i></span>
+                <el-cascader class="input"
+                  ref="myCascader"
+                   :props='props' :options="options"
+                  @change="handleChange"></el-cascader>
+              </div>
+          </div>
+          <div class="selli">
               <span>
               项目信息
               </span>aaa
-            </div>
           </div>
-          <div class="scbtns">
-            <div class="btn btn_primary h34">查询</div>
-            <div class="btn btn_default h34">重置</div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="公司全部项目" name="second">配置管理</el-tab-pane>
+        </div>
+        <div class="scbtns">
+          <div class="btn btn_primary h34">查询</div>
+          <div class="btn btn_cancel h34">重置</div>
+        </div>
       </el-tabs>
     </el-card>
 
     <el-card class="box-card noborder">
-
+      <div class="titles">项目明细
+      <div class="dc">
+        <div class="total">共126条</div>
+        <div class="btn-export"><img src="@/assets/images/EXCEL.png">导出EXCEL</div>
+      </div>
+      </div>
+      <div class="datalist">
+        <div class="datali">
+          <div class="det-title">轨道交通13号线扩能提升工程<span class="people"><i>A</i>四川-李丽  <font color="#FA8A00">正在跟进</font></span></div>
+          <div class="det-tips"><span class="tips tip1">轨道交通</span><span class="tips tip2">江西省-南昌市</span></div>
+          <div class="det-contets">
+            <div class="det-con">
+              <span>项目类型：</span>
+              <span>轨道交通</span>
+            </div>
+            <div class="det-con">
+              <span>投资估算（万元）：</span>
+              <span>21</span>
+            </div>
+            <div class="det-con">
+              <span>最后跟进时间：</span>
+              <span>2013-02-19</span>
+            </div>
+            <div class="det-con">
+              <span>业主单位：</span>
+              <span class="wordprimary">重庆市交通开发投资（集团）有限公司</span>
+            </div>
+          </div>
+          <el-divider></el-divider>
+          <div class="operates">
+            <div><img src="@/assets/images/follow.png">跟进</div>
+            <div><img src="@/assets/images/edit.png">编辑</div>
+            <div><img src="@/assets/images/delete.png">删除</div>
+          </div>
+          <div class="delform">
+            <div class="words">是否将项目删除</div>
+            <div>
+              <div class="btnsmall btn_primary h28">确定</div>
+              <div class="btnsmall btn_cancel h28">取消</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </el-card>
   </div>
 </template>
@@ -44,12 +92,237 @@ export default {
   name: 'ProjectList',
   data() {
     return {
+      props:{
+        multiple: true},
+      xmdq: [],
+      xmdqlabel:'项目地区',
       activeName:'first',
+      options: [
+        {
+        value: 'zhinan',
+        label: '指南',
+        children: [{
+          value: 'shejiyuanze',
+          label: '设计原则',
+          children: [{
+            value: 'yizhi',
+            label: '一致'
+          }, {
+            value: 'fankui',
+            label: '反馈'
+          }, {
+            value: 'xiaolv',
+            label: '效率'
+          }, {
+            value: 'kekong',
+            label: '可控'
+          }]
+        }, {
+          value: 'daohang',
+          label: '导航',
+          children: [{
+            value: 'cexiangdaohang',
+            label: '侧向导航'
+          }, {
+            value: 'dingbudaohang',
+            label: '顶部导航'
+          }]
+        }]
+      }, {
+        value: 'zujian',
+        label: '组件',
+        children: [{
+          value: 'basic',
+          label: 'Basic',
+          children: [{
+            value: 'layout',
+            label: 'Layout 布局'
+          }, {
+            value: 'color',
+            label: 'Color 色彩'
+          }, {
+            value: 'typography',
+            label: 'Typography 字体'
+          }, {
+            value: 'icon',
+            label: 'Icon 图标'
+          }, {
+            value: 'button',
+            label: 'Button 按钮'
+          }]
+        }, {
+          value: 'form',
+          label: 'Form',
+          children: [{
+            value: 'radio',
+            label: 'Radio 单选框'
+          }, {
+            value: 'checkbox',
+            label: 'Checkbox 多选框'
+          }, {
+            value: 'input',
+            label: 'Input 输入框'
+          }, {
+            value: 'input-number',
+            label: 'InputNumber 计数器'
+          }, {
+            value: 'select',
+            label: 'Select 选择器'
+          }, {
+            value: 'cascader',
+            label: 'Cascader 级联选择器'
+          }, {
+            value: 'switch',
+            label: 'Switch 开关'
+          }, {
+            value: 'slider',
+            label: 'Slider 滑块'
+          }, {
+            value: 'time-picker',
+            label: 'TimePicker 时间选择器'
+          }, {
+            value: 'date-picker',
+            label: 'DatePicker 日期选择器'
+          }, {
+            value: 'datetime-picker',
+            label: 'DateTimePicker 日期时间选择器'
+          }, {
+            value: 'upload',
+            label: 'Upload 上传'
+          }, {
+            value: 'rate',
+            label: 'Rate 评分'
+          }, {
+            value: 'form',
+            label: 'Form 表单'
+          }]
+        }, {
+          value: 'data',
+          label: 'Data',
+          children: [{
+            value: 'table',
+            label: 'Table 表格'
+          }, {
+            value: 'tag',
+            label: 'Tag 标签'
+          }, {
+            value: 'progress',
+            label: 'Progress 进度条'
+          }, {
+            value: 'tree',
+            label: 'Tree 树形控件'
+          }, {
+            value: 'pagination',
+            label: 'Pagination 分页'
+          }, {
+            value: 'badge',
+            label: 'Badge 标记'
+          }]
+        }, {
+          value: 'notice',
+          label: 'Notice',
+          children: [{
+            value: 'alert',
+            label: 'Alert 警告'
+          }, {
+            value: 'loading',
+            label: 'Loading 加载'
+          }, {
+            value: 'message',
+            label: 'Message 消息提示'
+          }, {
+            value: 'message-box',
+            label: 'MessageBox 弹框'
+          }, {
+            value: 'notification',
+            label: 'Notification 通知'
+          }]
+        }, {
+          value: 'navigation',
+          label: 'Navigation',
+          children: [{
+            value: 'menu',
+            label: 'NavMenu 导航菜单'
+          }, {
+            value: 'tabs',
+            label: 'Tabs 标签页'
+          }, {
+            value: 'breadcrumb',
+            label: 'Breadcrumb 面包屑'
+          }, {
+            value: 'dropdown',
+            label: 'Dropdown 下拉菜单'
+          }, {
+            value: 'steps',
+            label: 'Steps 步骤条'
+          }]
+        }, {
+          value: 'others',
+          label: 'Others',
+          children: [{
+            value: 'dialog',
+            label: 'Dialog 对话框'
+          }, {
+            value: 'tooltip',
+            label: 'Tooltip 文字提示'
+          }, {
+            value: 'popover',
+            label: 'Popover 弹出框'
+          }, {
+            value: 'card',
+            label: 'Card 卡片'
+          }, {
+            value: 'carousel',
+            label: 'Carousel 走马灯'
+          }, {
+            value: 'collapse',
+            label: 'Collapse 折叠面板'
+          }]
+        }]
+      }, {
+        value: 'ziyuan',
+        label: '资源',
+        children: [{
+          value: 'axure',
+          label: 'Axure Components'
+        }, {
+          value: 'sketch',
+          label: 'Sketch Templates'
+        }, {
+          value: 'jiaohu',
+          label: '组件交互文档'
+        }]
+      }]
+
     }
   },
   created() {
   },
   methods: {
+    getxmdq(){
+      console.log(888)
+    },
+    handleClick(){
+
+    },
+    handleChange(value) {
+      console.log(value);
+      this.xmdq = value
+      var labelString = this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
+      console.log(labelString)
+      if(labelString.length>0){
+        let dq = ''
+        labelString.forEach((item,index)=>{
+          let str = ','
+          if(index == 0)
+            str = ''
+          dq += str + item
+        })
+        this.xmdqlabel = dq
+      }else{
+        this.xmdqlabel = '项目地区'
+      }
+    }
   }
 }
 </script>
@@ -58,6 +331,9 @@ export default {
   .app-container{
     padding: 0;
   }
+  .el-card{
+    overflow: initial;
+  }
   .noborder{
     position: relative;
   }
@@ -97,7 +373,169 @@ export default {
       >span{
         float: left;
         margin-right: 28px;
+        opacity: 0.8;
+      }
+    }
+  }
+  .titles{
+    color: #232323;
+    font-size: 16px;
+    font-weight: bold;
+    height: 60px;
+    line-height: 64px;
+    border-bottom: 1px solid #EFEFEF;
+    padding-left: 26px;
+    &::after{
+      content: " ";
+      width: 2px;
+      height: 14px;
+      background: #445781;
+      float: left;
+      margin-left: -10px;
+      margin-top: 24px;
+    }
+    .dc{
+      float: right;
+      font-size: 12px;
+      color: #3D3D3D;
+      font-weight: 400;
+      padding-right: 24px;
+      position: relative;
+      &::after{
+        content: ' ';
+        width: 2px;
+        height: 2px;
+        background: rgba(35,35,35,0.4);
+        border-radius: 50%;
+        position: absolute;
+        top: 30px;
+        left: 14px;
+      }
+      >div{
+        display: inline-block;
+        margin-left: 20px;
+      }
+    }
+  }
+  .datalist{
+    .datali{
+      padding: 16px 16px 0;
+      position: relative;
+      .operates{
+        position: absolute;
+        z-index: 1;
+        right: 0;
+        top: 24px;
+        >div{
+          padding-right: 16px;
+          display: inline-block;
+          font-size: 12px;
+          >img{
+            float: left;
+            margin-right: 5px;
+          }
+        }
+        .tits{
+          padding: 12px 0;
+        }
+      }
+      .delform{
+        width: 200px;
+        height: 114px;
+        background: #FFFFFF;
+        box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1608);
+        border-radius: 2px;
+        position: absolute;
+        right: 16px;
+        top: -94px;
+        z-index: 3;
+        text-align: center;
+        .words{
+          padding: 24px 0;
+
+        }
+      }
+      &:hover{
+        background-color: #F6F9FC;
+        cursor: pointer;
+      }
+      .det-title{
+        color: #3D3D3D;
+        font-size: 16px;
+        font-weight: 700;
+        line-height: 23px;
+        .people{
+          padding-left: 10px;
+          color: #4f4f4f;
+          font-weight: 400;
+          font-size: 14px;
+          i{
+            width: 20px;
+            height: 20px;
+            background: #E3EEF9;
+            border-radius: 50%;
+            font-style: initial;
+            font-size: 12px;
+            display: inline-block;
+            color: #0081FF;
+            text-align: center;
+            line-height: 20px;
+            margin-right: 4px;
+          }
+        }
       }
+      .det-tips{
+        padding: 8px 0 ;
+        .tips{
+          display: inline-block;
+          padding: 4px 8px;
+          border-radius: 2px;
+          font-size: 12px;
+          margin-right: 8px;
+          &.tip1{
+            background-color: #E4F3FD;
+            color: #41A1FD;
+          }
+          &.tip2{
+            background-color: #F3F3FF;
+            color: #8491E8;
+          }
+        }
+      }
+      .det-contets{
+        padding: 4px 0 16px;
+        .det-con{
+          font-size: 14px;
+          display: inline-block;
+          padding-right: 32px;
+          &:last-child{
+            padding-right: 0;
+          }
+          span:nth-child(2n-1){
+            color: #a7a7a7;
+          }
+        }
+      }
+    }
+  }
+  .selectInput{
+    position: relative;
+    display: inline-block;
+    &:hover{
+      .selecttext{color: #0081FF;
+      i{color: #0081FF;}}
+    }
+    .selecttext{
+      i{
+        margin-left: 5px;
+        color: #a7a7a7;
+      }
+    }
+    .input{
+      position: absolute;
+      left: 0;
+      opacity: 0;
+      height: 20px;
     }
   }
 </style>