修改的card组件

components/page/BtnBox.vue

+<template>
+  <span class="btnStyle">
+    <span
+      class="mr20"
+      @click="lookBtn(id,$event)"
+      :class="{
+        bor: borders,
+        small: bigBox == 'small',
+        large: bigBox == 'large',
+        default: !bigBox,
+      }"
+      :style="{ color: colf(type), 'border-block-color': colf(type) }"
+    >
+      <Icon :type="iconFont" class="iconStyle" />{{ valueName }}
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  //   name: "",
+  data() {
+    return {};
+  },
+  props: {
+    id:Number,String,
+    default: null,
+    type: String,
+    default: "default",
+    valueName: String,
+    default: "",
+    iconFont: String,
+    default: "ios-paper",
+    borders: Boolean,
+    default: false,
+    bigBox: String,
+    default: "",
+  },
+  methods: {
+    colf(v) {
+      if (v == "error") {
+        return "#ed4014";
+      } else if (v == "warning") {
+        return "#f90";
+      } else if (v == "success") {
+        return "#19be6b";
+      } else if (v == "primary") {
+        return "#2db7f5";
+      } else {
+        return "#515a6e";
+      }
+    },
+    lookBtn(id,event) {
+      let a={
+        id:id,
+        event:event
+      }
+      this.$emit('click', a);
+      event.stopPropagation();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.btnStyle {
+  // display: inline-block;
+  font-size: 14px;
+  .small {
+    padding: 1px 3px;
+  }
+  .large {
+    padding: 10px 12px;
+  }
+  .default {
+    padding: 1px 7px;
+  }
+  .iconStyle {
+    margin-right: 4px;
+  }
+  .bor {
+    border: 1px solid;
+    border-radius: 4px;
+  }
+}
+</style>
\ No newline at end of file

components/page/Vcard.vue

 <template>
-  <div class="cardPage">
+  <div class="cardPage mt10 mb10">
     <div
       class="cardBox"
       :class="{ borderCss: isCard }"
@@ -65,47 +65,23 @@
           <div v-if="leftBottom">
             <span class="earlyWarn f14 fwBold mr20">
               <slot name="leftBottom">
-                <Icon :type="columns.oneIcon" class="iconStyle" />{{
-                  columns.leftT1
-                }}
+                <Icon :type="columns.oneIcon" class="iconStyle" />{{ columns.leftT1  }}
                 <!--   v-show="leftBtmicon" -->
               </slot>
             </span>
             <span class="overdue f14 fwBold mr20">
               <slot name="leftBottom2">
-                <Icon :type="columns.twoIcon" class="iconStyle" />{{
-                  columns.leftT2
-                }}
+                <Icon :type="columns.twoIcon" class="iconStyle" />{{ columns.leftT2  }}
                 <!-- v-show="leftBtmicon2" -->
               </slot>
             </span>
           </div>
-          <span class="rightMore" v-if="rightBottom">
+          <!--  v-if="rightBottom"-->
+          <span class="rightMore" >
             <slot name="rightBottom">
-              <span class="mr20" @click="lookBtn(columns.id)">
-                <a
-                  ><Icon :type="columns.lookIcon" class="iconStyle" />{{
-                    columns.lookName
-                  }}</a
-                >
-              </span>
-              <span class="mr20 elliPsis fwBold">
-                <span class="elliPsisSpan">•••</span>
-                <span class="showMore hide">
-                  <a v-if="columns.editName">
-                    <span class="mr20" @click="editBtn(columns.id)">
-                      <Icon :type="columns.editIcon" class="iconStyle" />
-                      {{ columns.editName }}
-                    </span>
-                  </a>
-                  <a v-if="columns.delName">
-                    <span class="mr20" @click="delBtn(columns.id)"
-                      ><Icon :type="columns.delIcon" class="iconStyle" />
-                      {{ columns.delName }}</span
-                    >
-                  </a>
-                </span>
-              </span>
+              <RightM :num='num' :rightM='rightBottom' :id='id'>
+                <slot ></slot>      
+              </RightM>           
             </slot>
           </span>
         </div>
@@ -118,6 +94,7 @@ export default {
   name: "cardPage",
   data() {
     return {
+      // num:3,
       single: false, //是否选中
       isCard: false,
       // leftBottom: false, //左侧底部是否显示
@@ -153,6 +130,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    num:Number,
+     id:Number,String,
+    default: null,
     // leftBtmicon:{//底部左侧图标
     //   type: Boolean,
     //   default: false,
@@ -200,6 +180,7 @@ export default {
   background: #ffffff;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   border-radius: 8px;
+  margin-bottom: 15px;
   .topCard {
     height: 40px;
     background: rgba(38, 128, 235, 0.2);
@@ -262,6 +243,7 @@ export default {
       }
     }
     .bottomCard {
+      justify-content: space-between;
       padding-bottom: 20px;
       padding-left: 14px;
       .leftBtm {
@@ -275,21 +257,9 @@ export default {
       }
       .rightMore {
         margin-left: auto;
-        .elliPsis {
-          color: #2680eb;
-        }
-        .elliPsis:hover {
-          .showMore {
-            display: inline-block;
-          }
-          .elliPsisSpan {
-            display: none;
-          }
-        }
-      }
-      .iconStyle {
-        margin-right: 4px;
+       
       }
+     
     }
   }
   img {

components/page/rightM.vue

+<template>
+  <div class="rightM" v-if="rightM"   @mouseleave="outPut">
+    <slot v-if="false"> </slot>
+    <BtnBox
+      @click="lookBtn()"
+      v-if="btnBoxList && btnBoxList.length > 0"
+      :borders="btnBoxList[0].borders"
+      :valueName="btnBoxList[0].valueName"
+      :type="btnBoxList[0].type"
+      :iconFont="btnBoxList[0].iconFont"
+    ></BtnBox>
+    <span class=" elliPsis fwBold"  slot="elliPsis" v-if="btnBoxList && btnBoxList.length > 1" >
+      <span :class="{hide:inlines,mr10:!inlines}" @mouseenter="inFo">•••</span>
+      <span class="mr10" :class='{inline:inlines,hide:!inlines}'    >
+        <BtnBox
+          @click="lookBtn(a)"
+          v-for="(value, index) in btnBoxList"
+          v-if="index"
+          :key="index"
+          :borders="value.borders"
+          :valueName="value.valueName"
+          :type="value.type"
+          :iconFont="value.iconFont"
+        ></BtnBox>
+      </span>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  // name: '',
+  data() {
+    return {
+        inlines:false,
+      btnBoxList: [],
+    };
+  },
+  props: {
+    id: Number,
+    String,
+    default: null,
+    num: Number,
+    default: 0,
+    rightM: Boolean,
+    default: true,
+  },
+  mounted() {
+    //   console.log("$slots",this.$slots,this.$slots.default)
+    if (this.$slots && this.$slots.default.length > 0) {
+      this.btnBoxList = [];
+      let listSolt = this.$slots.default;
+      listSolt.map((v) => {
+        if (v.componentOptions && v.componentOptions.tag == "BtnBox") {
+          let obj = {
+            id: v.componentOptions.propsData.id,
+            borders: v.componentOptions.propsData.borders,
+            iconFont: v.componentOptions.propsData.iconFont,
+            type: v.componentOptions.propsData.type,
+            valueName: v.componentOptions.propsData.valueName,
+          };
+          this.btnBoxList.push(obj);
+        }
+        //  console.log("componentOptions",v.componentOptions)
+      });
+      console.log("btnBoxList", this.btnBoxList);
+    }
+  },
+  methods: {
+    lookBtn(event) {
+    console.log("1111111111111111111111", event);
+    // this.$emit('click', event);
+    },
+    inFo(){
+            this.inlines=true;
+    },
+    outPut(){
+        console.log(this.inlines)
+         this.inlines=false;
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.rightM {
+  cursor: pointer;
+  height: auto;
+  .elliPsis {
+    color: #2680eb;
+  }
+//   .elliPsis:hover {
+//     .showMore {
+//       display: inline-block;
+//     }
+//     .elliPsisSpan {
+//       display: none;
+//     }
+//   }
+}
+</style>
\ No newline at end of file

pages/produce/orderlist.vue

@@ -5,7 +5,7 @@
       ref="grid"
       :batch="false"
       :type="typeInfo"
-      :span="6"
+      :span="8"
       :lazy="true"
       :conditions="easySearch"
       :action="action"
@@ -42,6 +42,7 @@
           @click="changeShwo"
         ></Button>
       </template>
+
       <template slot="card" slot-scope="{ row }">
         <!-- <div
           class="body"
@@ -161,7 +162,8 @@
             </Row>
           </div>
         </div> -->
-        <Vcard :multiple="multiple"  :img="img" :leftBottom='leftBottom' >
+
+        <Vcard :multiple="multiple" :img="img" :leftBottom="leftBottom">
           <template slot="title">
             {{ row.productName }}
           </template>
@@ -188,10 +190,30 @@
               {{ row.taskName }}
             </Filed>
           </template>
-          <template slot="leftBottom">      
-              图号:{{ row.drawnNumber }}
+          <template slot="leftBottom"> 图号:{{ row.drawnNumber }} </template>
+          <template slot="rightBottom">
+            <RightM :num="num" :rightM="rightBottom" :id="row.id">
+              <BtnBox
+      
+                :borders="true"
+                :valueName="`查看`"
+                :type="`success`"
+                :iconFont="`ios-create-outline`"
+              ></BtnBox>
+              <BtnBox
+                :borders="true"
+                :valueName="`编辑`"
+                :type="`success`"
+                :iconFont="`ios-create-outline`"
+              ></BtnBox>
+              <BtnBox
+                :borders="true"
+                :valueName="`删除`"
+                :type="`success`"
+                :iconFont="`ios-create-outline`"
+              ></BtnBox>
+            </RightM>
           </template>
-         
         </Vcard>
       </template>
     </DataGrid>
@@ -208,8 +230,10 @@ export default {
   },
   data() {
     return {
-      rightBottom:true,
-      leftBottom:true,
+      num: 3,
+      span: "9",
+      rightBottom: true,
+      leftBottom: true,
       multiple: false,
       img: true,
       action: Api.index,
@@ -336,6 +360,9 @@ export default {
     this.search();
   },
   methods: {
+    // lookBtn(a){
+    //   console.log('dfsdfsdfsdfsd',a)
+    // },
     search() {
       this.$refs.grid.reload(this.easySearch);
     },

pages/rightMore/index.vue

+<template>
+    <div class="rightM" v-if="rightM">
+      <div v-if="num == 1">
+        <slot >
+          <!-- <BtnBox
+            :borders="true"
+            :valueName="`查看`"
+            :type="`success`"
+            :iconFont="`ios-create-outline`"
+          ></BtnBox> -->
+        </slot>
+      </div>
+
+      <div v-if="num > 1" slot="all">
+        <slot >
+          <!-- <BtnBox
+            :borders="true"
+            :valueName="`查看`"
+            :type="`success`"
+            :iconFont="`ios-create-outline`"
+          ></BtnBox> -->
+        </slot>
+        <span class="mr20 elliPsis fwBold" slot="elliPsis">
+          <span class="elliPsisSpan">•••</span>
+          <span class="showMore hide mr20">
+            <slot  > 
+              <!--<BtnBox
+              :bigBox="`small`"
+              :borders="true"
+              :valueName="`编辑`"
+              :type="`primary`"
+              :iconFont="`ios-create-outline`"
+            ></BtnBox>
+          <BtnBox
+              :valueName="`删除`"
+              :type="`error`"
+              :iconFont="`ios-trash-outline`"
+            ></BtnBox>  -->
+            </slot>
+          </span>
+        </span>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  // name: '',
+  data() {
+    return {
+      num:1,
+      rightM: true,
+    };
+  },
+  props: {
+    // num: Number,
+    // default: 1,
+    // valueName: String,
+    // default: "查看",
+    // iconFont:String,
+    // default: "ios-paper",
+  },
+  mounted() {},
+  methods: {
+    lookBtn(id) {
+      console.log("详情", id);
+      event.stopPropagation();
+    },
+    editBtn(id) {
+      console.log("编辑", id);
+      event.stopPropagation();
+    },
+    delBtn(id) {
+      console.log("删除", id);
+      event.stopPropagation();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.rightM {
+  height: auto;
+  .elliPsis {
+    color: #2680eb;
+  }
+  .elliPsis:hover {
+    .showMore {
+      display: inline-block;
+    }
+    .elliPsisSpan {
+      display: none;
+    }
+  }
+}
+</style>
\ No newline at end of file

plugins/iview.js

@@ -79,8 +79,8 @@ import Actions from '@/components/page/actions.vue'
 import DateRange from '@/components/page/dateRange.vue'
 import FilesViewer from '@/components/page/filesViewer.vue'
 import Vcard from '@/components/page/Vcard.vue'
-
-
+import BtnBox from '@/components/page/BtnBox.vue'
+import RightM from '@/components/page/rightM.vue'
 // import FormMaking from 'form-making'
 // import 'form-making/dist/FormMaking.css'
 // import Element from 'element-ui';
@@ -162,9 +162,10 @@ Vue.component("DateRange", DateRange)
 Vue.component("Life", Life)
 Vue.component("FilesViewer", FilesViewer)
 Vue.component("Vcard", Vcard)
-
-//注入mock
-// require("../mock")
+Vue.component("BtnBox", BtnBox)
+Vue.component("RightM", RightM)
+    //注入mock
+    // require("../mock")
 Vue.prototype.$api = request;
 Vue.prototype.$http = Api;
 Vue.prototype.$u = Henq;