centaline-data-driven 1.2.21 → 1.2.24

package/src/centaline/dynamicDetail/src/dynamicContactList.vue

@@ -0,0 +1,953 @@
+<template>
+    <div>
+        <!-- 联系人 -->
+        <div class="contacts-head">
+            <div class="title-l">联系人信息</div>
+            <component class="el-button contacts-but el-button--info el-button--mini max-info" 
+                v-if="apiRouter!==null && !flagLook" :is="apiRouter.is" :vmodel="apiRouter" 
+                @click="lookOwner(apiRouter,$event)"></component>
+            <div class="contacts-tips" v-else>
+                <!-- <button class="el-button el-button--primary el-button--mini max-btn-add">新增联系人</button>
+                <button class="el-button el-button--primary el-button--mini max-btn-add">通话记录</button>
+                <button class="el-button el-button--primary el-button--mini max-btn-add">查看历史号码</button> -->
+                <component class="el-button el-button--primary el-button--mini max-btn-add" 
+                v-if="model && model.buttons!==null && model.buttons.length>0" 
+                v-for="(col, index) in model.buttons" :key="index"
+                :is="col.is" :vmodel="col" 
+                @click="fieldClickHandler(col,$event)"></component>
+            </div>
+        </div>
+        <!-- 表格 -->
+        <div class="contacts-table" v-show="flagLook">
+            <el-table :data="tableData" stripe fit style="width: 100%" :header-cell-style="{background:'#f3f3f3',color:'#333333'}">
+                <el-table-column v-for="(item,index) in columnList" :key="index"
+                    :property="item.prop" :label="item.label" :min-width="item.width" >
+                    <template slot-scope="scope">
+                    <span v-if="scope.column.property=='phone'">{{scope.row.phone }}</span>
+                    <span v-else-if="scope.column.property=='tel'">{{scope.row.tel}}</span>
+                    <span v-else>
+                        {{scope.row[scope.column.property]}}
+                    </span>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+
+<script>
+  import dynamicElement from '../../mixins/dynamicElement';
+  export default {
+    name: 'ct-contactList',
+    mixins: [dynamicElement],
+    props: {
+      vmodel: Object,
+      api: String,
+      apiParam: Object,
+      apiRouter: {
+        Object,
+        default:{}
+      },
+    },
+    data() {
+      return {
+        flagLook: false,
+        columnList: [
+        {
+          prop: 'name',
+          label: '联系人',
+          width: '80'
+        },
+        {
+          prop: 'type',
+          label: '类型',
+          width: '60'
+        },
+        {
+          prop: 'phone',
+          label: '手机',
+          width: '125'
+        },
+        {
+          prop: 'tel',
+          label: '座机',
+          width: '170'
+        },
+        {
+          prop: 'wx',
+          label: '微信',
+          width: '150'
+        },
+        {
+          prop: 'entTime',
+          label: '录入时间',
+          width: '150'
+        },
+        {
+          prop: 'entUser',
+          label: '录入人',
+          width: '80'
+        },
+        {
+          prop: 'remarks',
+          label: '操作',
+          // width:'180'
+        },
+        ],
+        tableData: [
+          {
+            name: '王建国先生',
+            type: '业主',
+            phone: '13866668888',
+            tel: '0275-55556666-5896',
+            wx: '555566665896',
+            entTime: '2021-10-26 29:27:25',
+            entUser: '王天',
+            remarks: '删除',
+            isIcon: true,
+          },
+        ],
+        opening:'first',      
+      }
+    },
+    mounted() {    
+    },
+    activated() {
+      this.$nextTick(() => {
+          this.setDetailHeight();
+      })
+    },
+    methods: {
+      load(data) {
+        var self = this;
+        this.model = data;
+        this.model.$vue = self;
+      },
+      loadFields() {
+        var self = this;        
+      },
+      lookOwner(router) {
+        var self = this; 
+        var submitData=router.getActionPara({}).para;
+        router.doAction(submitData, (res) => {
+          if (res.rtnCode === 200) {
+            self.loaderObj.ContactList(res,null,self.load);
+            self.flagLook = true;
+          }
+        });
+      },
+      setDetailHeight() {
+        this.$nextTick(() => {
+          if (this.$refs.detail && this.$refs.main) {
+            var h1 = this.$common.getParentPane(this).$el.offsetHeight | 0;
+            var h2 = this.$refs.detail.offsetTop | 0;
+            let detailHeight = h1 - h2;
+            this.model.detailHeight = detailHeight < 40 ? 350 : detailHeight;
+          }
+        });
+      }, 
+      fieldClickHandler(field) {
+        var self = this;
+        var callBack=null;
+        let submitData={};
+        var router = this.model.buttons.find((v) => {
+          return v.id === field.id;
+        });
+        if(router==undefined && this.model.actionRouter){
+          router = this.model.actionRouter.find((v) => {
+            return v.id === field.id;
+          });
+        }
+        if(router==undefined && this.model.otherTradeActionRouter){
+          if(field.id===this.model.otherTradeActionRouter.id){
+            router = this.model.otherTradeActionRouter
+          }
+        }
+        if(router==undefined && this.model.operationRouters){
+            router = this.model.operationRouters.find((v) => {
+              return v.id === field.id;
+            });
+            callBack="loadOperation";
+        }
+
+        if(router){
+          if(field.isSubmitDataFromSelf){
+            router.submitFormField.forEach((v) => {
+              submitData[v] = field.list[field.listIndex].code;
+            });
+          }
+          else{
+            router.submitFormField.forEach((v) => {
+              submitData[v] = self.model.fields1Dic[v].value;
+            });
+          }
+        }
+
+        if(callBack && callBack=='loadOperation'){
+          this.routerClickHandler(router,submitData,self.loadOperation);  
+        }
+        else{
+          this.routerClickHandler(router,submitData);
+        }
+      },
+      routerClickHandler(field, submitData,callBack) {
+        var self = this;
+        // this.model.scripts.$fd = field.id;
+        // this.model.scripts.$result = [];
+        
+        var clickAcion = function (field) {
+          //若不是客户端方法，则直接访问接口
+          if (!field.isClientFuntion) {
+            // if (typeof field.onClick !== 'undefined') {
+            //   verified = self.$common.excute.call(self.model.scripts, field.onClick);
+            // }
+            
+            if (field.isOpenForm) {
+              var dialogOption = {
+                title: field.pageTitle,
+                pane: self.$common.getParentPane(self),
+                content: [{
+                  component: 'ct-form',
+                  attrs: {
+                    api: field.action,
+                    apiParam: field.getActionPara(submitData).para,
+                    showTitle: false,
+                    width: field.dialogWidth + 'px',
+                    height: field.dialogHeight + 'px'
+                  },
+                  on: {
+                    submit(ev) {
+                      self.model.doAction(ev,field);
+                      if(callBack){
+                        callBack();
+                      }
+                      self.$common.closeDialog(dialogOption.dialog);
+                    }
+                  }
+                }]
+              };
+              self.$common.openDialog(dialogOption);
+            }
+            else if (field.isOpenList) {
+              var dialogOption = {
+                title: field.pageTitle,
+                pane: self.$common.getParentPane(self),
+                content: [{
+                  component: 'ct-searchlist',
+                  attrs: {
+                    searchConditionApi: field.actionForSearchLayout,
+                    searchDataApi: field.actionForSearch,
+                    apiParam: submitData,
+                    width: field.dialogWidth + 'px',
+                    height: field.dialogHeight + 'px'
+                  },
+                  on: {
+                    submit(ev) {
+                      self.model.updateFields(ev, () => {
+                        self.$refs.Fields.forEach((fd) => {
+                          fd.$forceUpdate();
+                        });
+                      });
+                      self.$common.closeDialog(dialogOption.dialog);
+                    }
+                  }
+                }]
+              };
+              self.$common.openDialog(dialogOption);
+            }
+            else if (field.isFormPageInTab || field.isSearchPageInTab) {// 外部框架tab页打开
+              submitData = field.getActionPara(submitData).para;
+              self.$common.getDataDrivenOpts().handler.openTab(field.action, submitData, field.pageTitle);
+            }
+            else if (field.isBrowserNewTab) {// 浏览器打开
+              submitData = field.getActionPara(submitData).para;
+              let query = self.$common.objectToQueryStr(submitData);
+              window.open(field.action + query, "_blank");
+            }
+            else{
+              field.doAction(submitData, (data) => {
+                self.model.doAction(data,field);
+                if(callBack){
+                  callBack();
+                }
+              })
+            }
+          }
+          //执行客户端脚本
+          else {
+            submitData = field.getActionPara(submitData).para;
+            let title=field.pageTitle==undefined ?field.label:field.pageTitle;
+            submitData.actionType=field.actionType;
+            var fun =self.$common.getDataDrivenOpts().handler[field.action];
+            fun(submitData,title,self.model);
+          }
+        }
+
+        if (field.isSubmit && !self.validExcute()) {
+          return;
+        }
+
+        if (field.alert) {
+          self.$common.confirm(field.alertMsg, field.alertCaption, {
+            confirmButtonText: field.alertOKButtonText,
+            cancelButtonText: field.alertCancelButtonText,
+            //type: 'warning'
+            center: field.alertCenter
+          }).then(() => {
+            clickAcion(field,submitData);
+          }).catch(() => {
+          });
+        }
+        else {
+          clickAcion(field,submitData);
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .details-content{
+    font-size: 12px;
+    .title-l{
+                font-weight: Bold;
+                font-size: 16px;
+                color: #333333;
+            }
+    .details-head{
+      padding: 16px;
+      display: flex;
+      .head-type{
+          font-size: 20px;
+          background: #EE6B6B;
+          color: #FFFFFF;
+          padding: 0 14px;
+          border-radius: 6px;
+          max-height: 40px;
+          line-height: 40px;
+          font-weight: Bold;
+  
+        }   
+        .head-info{
+            margin-left: 10px;
+        }
+        .title{
+          font-weight: Bold;
+          font-size: 16px;
+          margin-bottom: 3px;
+
+        }
+        .head-line{
+          display: inline-block;
+          height: 16px;
+          width: 2px;
+          background: #333333;
+          margin: 0 4px;
+          position: relative;
+          top: 1.5px;
+        }
+        .collection{
+          font-size: 18px;
+          margin-left: 10px;
+          cursor: pointer;
+          vertical-align: -2.85px;
+        }
+        .title-other {
+          color: #999999;
+          margin-bottom: 14px;
+          font-size: 12px;
+          span {
+            margin-right: 20px;
+          }
+          .other-icon {
+            font-size: 16px;
+          }
+          .location{
+            font-size: 16px;
+            vertical-align: -2.85px;
+          }
+        }
+        .title-tags {
+          display: flex;
+          .t-tag {
+            color: #999999;
+            background: #F3F3F3;
+            border: 1px solid #d8d8d8;
+            padding: 2px 9px;
+            border-radius: 3px;
+            margin-right: 10px;
+          }
+        }
+        .head-but{
+          margin-left: auto;
+          font-size: 12px;
+          text-align: right;
+          .max-report{
+            height: 26px;
+            color: #333333;
+            background-color: #FFFFFF;
+            border: 1px solid #E0E0E0;
+            border-radius: 6px;
+            font-size: 12px;
+          }
+          .max-report:hover .report-cont{
+              display: block;
+              color: #333;
+          }
+          .report-cont{
+            display: none;
+            width: 115px;
+            background: #fff;
+            -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
+            box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
+            border-radius: 5px;
+            list-style: none;
+            position: absolute;
+            left: -61px;
+            top: 26px;
+            padding: 5px 0;
+            color: #333;
+          }
+          .report-cont li{
+            padding: 5px 10px;
+          }
+        }
+        
+                
+    }
+     .details-mid {
+      display: flex;
+      justify-content: space-between;
+      .mid-l {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .hous-info {
+          padding-bottom: 10px;
+          .base-clolr {
+            color: #EE6B6B;
+          }
+          .expand-f {
+            line-height: 15px;
+            font-size: 18px;
+            font-weight: bold;
+          }
+          .img-jsq{
+            width: 14px;
+            height: 14px;
+            display: inline-block;
+            margin-left: 10px;
+          }
+          .info-conten {
+            display: flex;
+            .info-row {
+              display: flex;
+            }
+           
+            .hous-t {
+              width: 260px;
+              .swiper-i {
+                position: relative;
+                width: 100%;
+                height: 100%;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+                .hous-icon {
+                  width: 60px;
+                  height: 60px;
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translate(-50%, -50%);
+                }
+              }
+          
+              .hous-img {
+                margin-top: 10px;
+                width: 100%;
+                overflow-x: hidden;
+                overflow-y: hidden;
+                white-space: nowrap;
+                .img-i {
+                  position: relative;
+                  width: 80px;
+                  height: 44px;
+                  margin-right: 10px;
+                  display: inline-block;
+                  img{
+                      width: 100%;
+                      height: 100%;
+                  
+                  }
+                  .img-bot {
+                    width: 100%;
+                    height: 16px;
+                    background: rgba(0, 0, 0, 0.5);
+                    color: #fff;
+                    position: absolute;
+                    bottom: 0;
+                    font-weight: Bold;
+                    .img-icon {
+                      width: 12px;
+                    height: 12px;
+                      margin: 0 5px;
+                      margin: 0 5px;
+                      vertical-align: -1.5px;
+                    }
+                  }
+                }
+              }
+            }
+            .hous-b {
+              position: relative;
+              margin-left: 16px;
+              margin-top: 20px;
+              flex: 1;
+              .code-ewm {
+                width: 32px;
+                height: 32px;
+                position: absolute;
+                top: -32px;
+                right: -12px;
+              }
+
+              .row-i {
+                width: 33.3%;
+                display: flex;
+              }
+              .info-mid {
+                margin: 35px 0 0 0;
+                padding: 20px;
+                border-top: 1px solid #e0e0e0;
+                border-bottom: 1px solid #e0e0e0;
+                display: flex;
+                justify-content: space-between;
+                .mid-i {
+                  text-align: center;
+                }
+                .mid-i div:nth-child(1) {
+                  margin-bottom: 10px;
+                }
+                .mid-i div:nth-child(2) {
+                  font-size: 14px;
+                  font-weight: bold;
+                }
+              }
+            }
+          }
+          .info-conten-b{
+             display: flex;
+             margin-top: 15px;
+            .info-row {
+              display: flex;
+              width: 100%;
+              padding-left: 9px;
+            }
+            .row-i{
+              width: 25%;
+            }
+            .row-i100{
+              width: 100%;
+            }
+          }
+          .open-mero{
+            text-align: center;
+            padding: 3px 0;
+          }
+          // .mero{
+              
+          //     vertical-align: 2px;
+          //     overflow: hidden;
+          //     margin-left: 5px;
+          // }
+          .more-colose{
+            background: url('../../../assets/mero-colose.png')no-repeat;
+            background-size: 100% 100%;
+            width: 18px;
+            height: 9px;
+            display: inline-block;
+          }
+          .mero-open{
+            background: url('../../../assets/more-open.png')no-repeat;
+            background-size: 100% 100%;
+            width: 18px;
+            height: 9px;
+            display: inline-block;
+          }
+          .hous-mero {
+            display: flex;
+            .mero-labe {
+              min-width: 60px;
+            }
+          }
+        }
+        
+        .contacts-info {
+          padding: 16px;
+          .contacts-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            
+            .contacts-but {
+              height: 30px;
+              font-weight: Bold;
+            }
+            .contacts-tips {
+              display: flex;
+            }
+          }
+          .contacts-table {
+            margin-top: 16px;
+            .table-icon {
+              font-size: 14px;
+              margin-left: 4px;
+            }
+            .el-table {
+              font-size: 12px;
+            }
+            .el-table th.el-table__cell > .cell {
+              padding-left: 16px;
+            }
+            .el-table .cell {
+              padding-left: 16px;
+            }
+            .el-table--striped
+              .el-table__body
+              tr.el-table__row--striped
+              td.el-table__cell {
+              background: 1px solid #E0E0E0;
+            }
+          }
+        }
+        
+        .tablist-info {
+          .details-tabs-box{
+            
+            .el-menu--horizontal > .el-menu-item{
+              height: 30px;
+              line-height: 30px;
+              border-radius: none;
+            }
+          }
+        }
+
+        .contribute-info {
+          .contribute-list {
+            width: 100%;
+            display: flex;
+            align-content: flex-start;
+            flex-flow: row wrap;
+            .contribute-i {
+              width: calc((100% - 16px * 3) / 4);
+              margin: 16px 16px 0 0;
+              padding: 16px 0 16px 16px;
+              border: 1px solid #e0e0e0;
+              border-radius: 6px;
+              display: flex;
+              img {
+                width: 50px;
+                height: 50px;
+                margin-right: 6px;
+              }
+              .user-title {
+                font-weight: Bold;
+                font-size: 14px;
+                margin-bottom: 8px;
+              }
+              .user-but{
+                  cursor: pointer;
+                  font-size: 12px;
+                  color: #FFFFFF;
+                  background: #FBD46D;
+                  height: 20px;
+                  line-height: 20px;
+                  border-radius: 3px;
+                  text-align: center;
+                  padding: 0 10px;
+
+              }
+
+            }
+            
+            .contribute-i:nth-child(4n) {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+      .mid-l > div {
+        margin-bottom: 10px;
+        padding: 16px;
+      }
+      .mid-r > div {
+        margin-bottom: 10px;
+        padding: 16px;
+      }
+      .mid-r {
+        width: 26.666%;
+        margin-left: 10px;
+
+        display: flex;
+        flex-direction: column;
+         .tab-conten {
+            display: flex;
+            margin-bottom: 16px;
+            img {
+              width: 50px;
+              height: 50px;
+              margin-right: 10px;
+            }
+            .user-name {
+              display: flex;
+            }
+            .text {
+              font-size: 14px;
+              font-weight: Bold;
+              margin-right: 10px;
+            }
+            .user-other {
+              min-height: 200px;
+            }
+            .user-but{cursor: pointer;
+              font-size: 12px;
+              color: #FFFFFF;
+              background: #FBD46D;
+              height: 20px;
+              line-height: 20px;
+              border-radius: 3px;
+              text-align: center;
+              padding: 0 10px;
+          }
+          }
+        .take-info {
+          font-size: 16px;
+          .red-text {
+            font-size: 18px;
+            font-weight: bold;
+            color: #EE6B6B;
+          }
+        }
+        .staff-info {
+          padding-bottom: 10px;
+          .open-mero{
+            text-align: center;
+            padding: 3px 0;
+          }
+          .more-colose{
+            background: url('../../../assets/mero-colose.png')no-repeat;
+            background-size: 100% 100%;
+            width: 18px;
+            height: 9px;
+            display: inline-block;
+          }
+          .mero-open{
+            background: url('../../../assets/more-open.png')no-repeat;
+            background-size: 100% 100%;
+            width: 18px;
+            height: 9px;
+            display: inline-block;
+          }
+          .hous-mero {
+            display: flex;
+            .mero-labe {
+              min-width: 60px;
+            }
+          }
+         
+         
+        }
+        .operation-list {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .list-item {
+            width: 33.3%;
+            height: 62px;
+            font-size: 14px;
+            text-align: center;
+            font-weight: bold;
+            border: none;
+          }
+          .list-item:hover {
+            color: #fff;
+            background: #FF9393;
+          }
+          .list-item:nth-child(2) {
+            margin: 0 10px;
+          }
+          .list-item:nth-child(3) {
+            margin-left: 0;
+          }
+        }
+
+        .operation-table {
+          padding: 0;
+          .table-box {
+            display: flex;
+            // align-items: center;
+            border-bottom: 1px solid #e0e0e0;
+            .t-item {
+              padding: 0 16px;
+              font-size: 14px;
+              flex: 1;
+              position: relative;
+              display: flex;
+              flex-flow: column;
+              align-items: flex-start;
+              border-right: 1px solid #e0e0e0;
+              .i {
+                position: absolute;
+                top: 50%;
+                // left: 50%;
+                transform: translateY(-50%);
+              }
+              .t-but {
+                font-size: 12px;
+                margin-left: 0;
+                width: 104px;
+                // height: 100%;
+                // margin: 12px 16px 0 16px;
+                margin-top: 12px;
+                padding: 0;
+              }
+              .t-but:nth-last-child(1) {
+                margin-bottom: 12px;
+              }
+            }
+            .t-item:nth-last-child(1) {
+              border-right: 0;
+            }
+          }
+          .table-box:nth-last-child(1) {
+            border-bottom: 0;
+          }
+        }
+
+        .customer{
+            background: #fff;
+            border-radius: 6px;
+            width: 100%;
+          .customer-title{
+              font-weight: Bold;
+              font-size: 16px;
+              color: #333;
+          }
+          .customre-line{
+              width: 100%;
+              height: 1px;
+              margin-top: 10px;
+              background: #E0E0E0;
+          }
+          .match-customre{
+            display: flex;
+            margin-top: 10px;
+              .customre-name{
+                font-weight: Bold;
+                font-size: 14px;
+                color: #333333;margin-right: 10px;
+              }
+              .t-tag{
+                width: 41px;
+                color: #999;
+                background: #f3f3f3;
+                border: 1px solid #d8d8d8;
+                padding: 2px 9px;
+                border-radius: 3px;
+                margin-right: 10px;
+              }
+              
+          }
+          .user-but{
+                  cursor: pointer;
+                  font-size: 12px;
+                  color: #FFFFFF;
+                  background: #FBD46D;
+                  height: 20px;
+                  line-height: 20px;
+                  border-radius: 3px;
+                  text-align: center;
+                  padding: 0 10px;
+
+              }
+              .customr-name{
+                position: absolute;
+                right: 0;
+              }
+              .clearfix{
+                  clear: both;
+              }
+          .customre-l{
+            float: left;
+            width: 50%;
+            margin-top: 10px;
+              .row-i{
+                padding: 5px 0;
+              }
+
+          }
+          
+          .customre-r{
+            float: right;
+            width: 50%;
+            margin-top: 10px;
+            .row-i{
+                padding: 5px 0;
+              }
+          }
+        }
+      }
+    }
+  }
+  // 按钮
+.max-info{
+  height: 26px;
+  color: #333333;
+  background-color: #FFFFFF;
+  border: 1px solid #E0E0E0;
+  border-radius: 6px;
+  font-size: 12px;
+}
+.max-default{
+  border: 1px solid #EE6B6B;
+  color: #EE6B6B;
+  height: 26px;
+  
+  border-radius: 6px;
+  font-size: 12px;
+}
+.max-info:hover,.max-default:hover{
+    background-color:#FF9393;
+    border-color: #FF9393;
+    color: #fff;
+}
+.max-info:active,.max-default:active{
+    background-color: #B33136;
+    border-color: #B33136;
+    color: #fff;
+}
+.max-btn-add button{ /*list-button*/
+    height: 26px;
+    background: #EE6B6B;
+    box-shadow: 0px 2px 4px 0px rgba(238,107,107,0.25);
+    border-radius: 6px;
+}
+.max-btn-add button:hover{
+    background-color:#FF9393;
+    border-color: #FF9393;
+}
+.max-btn-add button:focus,.max-btn-add button:active{
+    background-color: #B33136;
+    border-color: #B33136;
+}
+.max-comfirm-content button{
+    height: 26px;
+    border-radius: 6px;
+}
+.r{
+  float: right;
+}
+</style>