修改的card

components/page/Vcard.vue

 <template>
-  <div class="cardPage mt10 mb10">
+  <div class="cardPage">
+    <!-- :columns="rowCard" -->
     <div
-      class="cardBox"
+      class="cardBox mb10"
       :class="{ borderCss: isCard }"
-      @click="clickCard(columns)"
-      :columns="columns"
+      @click="clickCard(row)"
+      @mouseenter="enterCard"
+      @mouseleave="leaveCard"
+    >
+      <p
+        class="topCard lh40 flex pr"
+        :style="{ background: topStyle }"
+        slot="header"
       >
-      <p class="topCard lh40 flex pr" slot="header">
         <span class="checkSingle" v-if="multiple">
           <slot name="multiple">
             <Checkbox
               v-model="single"
-              @on-change="singleChange(single, columns)"
+              @on-change="singleChange(single, row)"
             ></Checkbox>
           </slot>
         </span>
         <span class="titleName f14 fwBold zh-ellip ml20">
-          <slot name="title">
-            {{ columns.topTitle }}
+          <slot name="title" v-if="title">
+            {{ title }}
           </slot>
         </span>
         <span class="f14 fwBold zh-ellip topCount">
-          <slot name="topCount">
-            {{ columns.topCount }}
+          <slot name="topCount" v-if="subtitle">
+            {{ subtitle }}
           </slot>
         </span>
+        <slot name="colorBol">
           <span
             class="triangle pa"
-          v-show="columns.borCol"
             :style="{
-            'border-color':
-              'transparent ' + columns.borCol + columns.borCol + ' transparent',
+              'border-right-color': life,
+              'border-bottom-color': life,
             }"
           ></span>
-        <span class="triangleName pa f12 fwBold" v-show="columns.borCol">{{
-          columns.markerName
-        }}</span>
+          <span class="triangleName pa f12 fwBold" v-if="lifeCode">
+            <state
+              code="taskList.status"
+              ref="state"
+              :value="lifeCode"
+              type="text"
+              :color="false"
+            ></state>
+          </span>
+        </slot>
       </p>
       <div class="countCard">
         <div class="mainCount flex" slot="main">
           <div class="imgBox" v-if="img">
             <slot name="img">
-              <img :src="columns.srcImg" v-if="columns.srcImg" alt="图片" />
-              <div
-                v-else-if="
-                  columns.srcImg == null || columns.srcImg == underfined
-                "
-              >
-                无图片
-              </div>
+              <img :src="downUrl + srcImg" v-if="srcImg" alt="图片" />
+              <div v-else-if="!srcImg">无图片</div>
               <img :src="srcImg1" v-else alt="图片" />
             </slot>
           </div>
           <div class="rightCount mr20 mt20 ml20">
             <slot name="fileLine">
-              <Filed :name="columns.countName4">
-                {{ columns.content4 }}
+              <Filed :name="countTitle">
+                {{ count }}
                 <Icon class="blueFont" type="md-sync" />
               </Filed>
             </slot>
           </div>
         </div>
         <div class="bottomCard flex" slot="footer">
-          <div v-if="leftBottom">
+          <div>
             <span class="earlyWarn f14 fwBold mr20">
-              <slot name="leftBottom">
-                <Icon :type="columns.oneIcon" class="iconStyle" />{{
-                  columns.leftT1
-                }}
+              <slot name="leftBottom" v-if="leftOneName">
+                <Icon :type="leftOneIcon" class="iconStyle" />
+                {{ leftOneName }}
                 <!--   v-show="leftBtmicon" -->
               </slot>
             </span>
             <span class="overdue f14 fwBold mr20">
-              <slot name="leftBottom2">
-                <Icon :type="columns.twoIcon" class="iconStyle" />{{
-                  columns.leftT2
-                }}
-                <!-- v-show="leftBtmicon2" -->
+              <slot name="leftBottom2" v-if="leftTwoName">
+                <Icon :type="leftTwoIcon" class="iconStyle" />
+                {{ leftTwoName }}
               </slot>
             </span>
           </div>
-          <!--  v-if="rightBottom"-->
           <span class="rightMore">
-            <slot name="rightBottom">
-              <RightM :num="num" :rightM="rightBottom" >
-                <slot></slot>
-              </RightM>
-            </slot>
+            <slot name="rightBottom"> </slot>
           </span>
         </div>
       </div>
@@ -98,18 +97,22 @@ export default {
   name: "cardPage",
   data() {
     return {
-      // num:3,
+      rightList: [],
+      // rightBottom: true,
+      life: "",
+      topStyle: "rgba(38, 128, 235, 0.2)",
+      countTitle: "",
+      count: "",
+      downUrl: fileUrlDown,
       single: false, //是否选中
       isCard: false,
-      // leftBottom: false, //左侧底部是否显示
-      // rightBottom: false, //右侧底部是否显示
-      columns: {},
+      // rowCard: {},
       srcImg1: require("../../assets/imgicon/chan_Pin.png"),
     };
   },
   props: {
-  //  datas:{
-  //     type:Array,
+    // columns: {
+    //   type: Object,
     //   default: [],
     // },
     multiple: {
@@ -120,37 +123,85 @@ export default {
       type: Boolean,
       default: false,
     },
-    moreTrue: {
-      type: Boolean,
-      default: false,
+    srcImg: {
+      type: String,
+      default: "",
     },
-    leftBottom: {
-      //底部左侧显示
+    moreTrue: {
       type: Boolean,
       default: false,
     },
-    rightBottom: {
-      //底部右侧显示
-      type: Boolean,
-      default: false,
+
+    title: {
+      type: String,
+      default: "",
     },
-     num:{
-      type: Number,
-      default: 0,
+    subtitle: {
+      type: String,
+      default: "",
     },
-    // row: {
-    //   type:[Array,Object],
-    //   default: [],
+    // life: {
+    //   type: String,
+    //   default: "#666",
     // },
+    lifeCode: {
+      type: [String, Number],
+      default: "",
+    },
+    leftOneName: {
+      type: String,
+      default: "",
+    },
+    leftOneIcon: {
+      type: String,
+      default: "",
+    },
+    leftTwoName: {
+      type: String,
+      default: "",
+    },
+    leftTwoIcon: {
+      type: String,
+      default: "",
+    },
+    row: {
+      type: Object,
+      default: [],
+    },
+  },
+  created() {
+    if (this.lifeCode) {
+      this.tdStyle(this.lifeCode);
+    }
+    // this.data = this.$store.getters.dictionaryByKey(this.code) || []; //rightM组件中用到
   },
-  created() {},
   methods: {
-    clickCard(columns) {
+    enterCard() {
+      if (this.multiple) {
+        this.topStyle = "rgba(38, 128, 235, 0.4)";
+      }
+    },
+    leaveCard() {
+      this.topStyle = "rgba(38, 128, 235, 0.2)";
+    },
+    tdStyle(val) {
+      //动态根据状态值加载状态值对应的颜色
+      let temDic = this.$store.getters.dictionaryByKey("taskList.status");
+      this.life = "";
+      temDic.forEach((s) => {
+        if (Number(s.code) == val) {
+          this.life = s.color;
+        }
+      });
+    },
+    clickCard(value) {
+      console.log(value);
       //点击整个card
       this.isCard = !this.isCard;
       this.single = !this.single;
     },
-    singleChange(v, columns) {
+    singleChange(v, rows) {
+      console.log(v, rows);
       //checkbox
       event.stopPropagation();
     },
@@ -158,28 +209,29 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="less" >
 .cardBox {
+  min-height: 310px;
   box-sizing: border-box;
-  width: 498px;
   background: #ffffff;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   border-radius: 8px;
-  margin-bottom: 15px;
+  // margin-bottom: 15px;
   .topCard {
     height: 40px;
-    background: rgba(38, 128, 235, 0.2);
+    // background: rgba(38, 128, 235, 0.2);
     border-radius: 8px 8px 0px 0px;
     border-bottom: 1px dashed #2680eb;
     .checkSingle {
       margin-left: 16px;
-      // margin-right: 24px;
     }
     .titleName {
-      width: 190px;
+      // width: 190px;
+      min-width: 190px;
     }
     .topCount {
-      max-width: 205px;
+      // max-width: 205px;
+      min-width: 205px;
     }
     /* css3绘制三角形 */
     .triangle {
@@ -187,17 +239,20 @@ export default {
       height: 0px;
       border-width: 20px;
       border-style: solid; /*定义的是实现边框*/
-
+      border-color: transparent;
       border-radius: 4px;
       transform: rotate(-90deg);
       right: 0;
       top: 0;
     }
     .triangleName {
-      right: -5px;
-      top: -1px;
+      right: -3px;
+      top: -3px;
       transform: rotate(45deg);
       color: #ffffff;
+      .ib > span {
+        font-size: 12px;
+      }
     }
   }
   .countCard {
@@ -252,9 +307,9 @@ export default {
 }
 .cardBox:hover {
   box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4);
-  .topCard {
-    background: rgba(38, 128, 235, 0.4);
-  }
+  // .topCard {
+  //   background: rgba(38, 128, 235, 0.4);
+  // }
 }
 .borderCss {
   border: 2px solid #2680eb;

components/page/rightM.vue

@@ -2,19 +2,18 @@
   <div
     class="rightM flex"
     :class="{ mr10: num == 1 }"
-    v-if="rightM"
+    v-if="rightM && rightList"
     @mouseleave="outPut"
   >
-    <slot>
-      <op
-        v-for="(v, i) in data.slice(0, num)"
+    <slot >
+      <op   v-if="rightList && rightList.slice(0, num).length > 0"
+        v-for="(v, i) in rightList.slice(0, num)"
         :key="i"
         :title="v.name"
         :type="v.type"
         :msg="v.msg"
         :disable="v.disable" 
         @click="v.click(row,$event)"
-        v-if="data && data.slice(0, num).length > 0"
       >
        <Icon :type="v.icon==null || v.icon==undefined ? 'ios-paper':v.icon" v-if="v.type=='icon'||  v.type=='' || v.type==undefined || v.type==null "/>
         <span v-if="v.name">
@@ -24,20 +23,20 @@
       <span
         class="elliPsis fwBold"
         slot="elliPsis"
-        v-if="data && data.length > num > 0"
+        v-if="rightList && rightList.length > num > 0"
       >
         <span :class="{ hide: inlines, mr10: !inlines }" @mouseenter="inFo"
           >•••</span >
         <span class="mr10" :class="{ inline: inlines, hide: !inlines }">
           <op
-            v-for="(value, index) in data.slice(num)"
+            v-for="(value, index) in rightList.slice(num)"
             :key="index"
             :title="value.name"
             :type="value.type"
             :msg="value.msg"
             :disable="value.disable"
             @click="value.click(row,$event)"
-            v-if="data &&  data.slice(num).length >= num"
+            v-if="rightList &&  rightList.slice(num).length >= num"
           >
             <Icon :type="value.icon==''?'ios-paper':value.icon" v-if="value.type=='icon'|| value.type=='' || value.type==undefined || value.type==null"/>
             <span v-if="value.name">
@@ -59,11 +58,11 @@ export default {
   },
   props: {
     row: {
-      type: [Array, Object],
-      default: [],
+     type:[Object,Array],
+      default: []
     },
-    data: {
-      type: Array,
+    rightList: {
+       type:[Object,Array],
       default: [],
     },
     num: {
@@ -77,19 +76,12 @@ export default {
   },
   mounted() {
     //   console.log("$slots",this.$slots,this.$slots.default)
-  // if(this.data.length>0){
-  //   this.data.map(v=>{
-  //       if(v.icon='')
-  //   })
-  // }  
-    console.log(this.data.slice(0, this.num));
   },
   methods: {
     inFo() {
       this.inlines = true;
     },
     outPut() {
-      // console.log(this.inlines)
       this.inlines = false;
     },
   },
@@ -103,13 +95,5 @@ export default {
   .elliPsis {
     color: #2680eb;
   }
-  //   .elliPsis:hover {
-  //     .showMore {
-  //       display: inline-block;
-  //     }
-  //     .elliPsisSpan {
-  //       display: none;
-  //     }
-  //   }
 }
 </style>
\ No newline at end of file

pages/produce/orderlist.vue

@@ -5,11 +5,11 @@
       ref="grid"
       :batch="false"
       :type="typeInfo"
-      :span="8"
+      :span="6"
       :lazy="true"
       :conditions="easySearch"
       :action="action"
-      :gutter="40"
+      :gutter="10"
     >
       <template slot="easySearch">
         <Form ref="formInline" :model="easySearch" inline>
@@ -43,8 +43,8 @@
         ></Button>
       </template>
 
-      <template slot="card" slot-scope="{ row }">
-        <!-- <div
+      <template slot="card" slot-scope="{ row }" >
+        <div
           class="body"
           @click="
             toExecute(
@@ -161,41 +161,40 @@
               </Col>
             </Row>
           </div>
-        </div> -->
-
-        <Vcard :multiple="multiple" :img="img" :leftBottom="leftBottom">
-          <template slot="title">
-            {{ row.productName }}
-          </template>
-          <template slot="topCount">
-            {{ row.mesCode }}
-          </template>
-          <template slot="img">
-            <img :src="downUrl + row.productUrl" v-if="row.productUrl" />
-          </template>
+        </div>
+        <!-- <Vcard 
+          v-if='row'
+          :row='row'
+          :img="img"
+          :srcImg='row.productUrl'
+          :title="row.productName"
+          :subtitle="row.mesCode"
+          :lifeCode="row.status"
+          :leftOneName='row.drawnNumber'
+        >
           <template slot="fileLine">
-            <Filed :span="24" name="开始时间：">
+            <Filed :span="24" :name="l('beginTime')">
               {{ row.beginTime }}
             </Filed>
-            <Filed :span="24" name="计划结束时间：">
+            <Filed :span="24" :name="l('endTime')">
               {{ row.endTime }}
             </Filed>
-            <Filed :span="14" name="生产数量：">
+            <Filed :span="12" :name="l('quantity')">
               {{ row.quantity }}
             </Filed>
-            <Filed :span="8" name="工序号：">
+            <Filed :span="12" name="工序号：">
               {{ row.taskSeq }}
             </Filed>
             <Filed :span="24" name="工序名称：">
               {{ row.taskName }}
             </Filed>
-          </template>
-          <template slot="leftBottom"> 图号:{{ row.drawnNumber }} </template>
-          <template slot="rightBottom">
-            <RightM :num="100" :rightM="rightBottom" :data="buttons" :row="row">
+          </template> -->
+          <!-- <template slot="leftBottom"> 图号:{{ row.drawnNumber }} </template>  -->
+          <!-- <template slot="rightBottom">
+            <RightM :num="num" :rightM="rightBottom" :rightList="buttons" :row="row">
             </RightM>
-          </template>
-        </Vcard>
+          </template> -->
+        <!-- </Vcard> -->
       </template>
     </DataGrid>
   </div>
@@ -211,10 +210,10 @@ export default {
   },
   data() {
     return {
+
        num: 2,
       span: "9",
        rightBottom: true,
-      leftBottom: true,
       multiple: false,
       img: true,
       action: Api.index,
@@ -431,6 +430,8 @@ export default {
       });
     },
     tdStyle(val) {
+      console.log(val);
+      // debugger
       //动态根据状态值加载状态值对应的颜色
       let temDic = this.$store.getters.dictionaryByKey("taskList.status");
       let temColor = "#666";