fix: 卡券ui

src/components/libs/adjust-stock.vue

 <template>
-  <el-dialog title="修改库存" :visible.sync="show" width="390px" :before-close="close" append-to-body>
-    <div v-loading="loading" class="text-center">
-      <!-- <span class="mr20">库存数量：</span><el-radio v-model="calculate" :label="true">增加</el-radio>
-      <el-radio v-model="calculate" :label="false">减少</el-radio> -->
-      <div class="pt20">
-        <el-select v-model="calculate" placeholder="请选择" style="width:90px;" class="prepend-select">
+  <el-dialog :title="title" :visible.sync="show" :width="width" :before-close="close" append-to-body>
+    <el-form v-loading="loading" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
+      <el-form-item prop="stock" label="可占库存">
+        <el-select v-model="ruleForm.type" placeholder="请选择" class="prepend-select w100">
           <el-option label="增加" :value="1"></el-option>
           <el-option label="减少" :value="2"></el-option>
         </el-select>
-        <el-input-number placeholder="请输入调整库存数" controls-position="right" :precision="0" :min="0" :max="max" v-model="count" class="w200 block-center insert-input" size="small" @blur="checkCalc"></el-input-number>
-      </div>
-      <div class="mt20">
-        <span class="mr20">目标库存：</span>
-        <el-input-number :disabled="true" :precision="0" controls-position="right" :min="0" :value="stock" class="w200 inline-block" size="small" />
-      </div>
+        <el-input-number v-model="ruleForm.stock" placeholder="请输入" controls-position="right" :precision="0" :min="1" :max="max" class="w140 block-center insert-input" size="small"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="remark" label="调整备注">
+        <el-input type="textarea" v-model="ruleForm.remark" maxlength="240" show-word-limit class="w260" placeholder="" :rows="4"></el-input>
+      </el-form-item>
+    </el-form>
     <slot></slot>
-    </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="close">取消</el-button>
       <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
@@ -34,63 +31,64 @@ export default {
     show: {
       type: Boolean,
       default: false
+    },
+    title: {
+      type: String,
+      default: '调整库存'
+    },
+    width: {
+      type: String,
+      default: '500px'
     }
   },
   data() {
+    const validateStock = (rule, value, callback) => {
+      const { stock } = this.ruleForm;
+      if (stock === '' || stock == undefined) {
+        callback(new Error('请输入库存值'));
+      } else {
+        callback();
+      }
+    };
     return {
+      ruleForm: {
+        stock: 0,
+        type: 1, // int	1: 增加; 2: 减少
+        remark: ''
+      },
+      rules: {
+        stock: { required: true, validator: validateStock, trigger: 'change' },
+        remark: { required: true, message: '请输入备注', trigger: 'change' },
+      },
       loading: false,
-      count: 0,
-      calculate: 1 // int	1: 增加; 2: 减少
     };
   },
   methods: {
-    checkCalc() {
-      if (this.calculate == 2) {
-        if (this.count > this.totalCount) {
-          this.count = this.totalCount;
-          this.$tips({ type: 'warning', message: '输入数量不能大于总数' });
-        }
-      }
-    },
     close() {
       this.loading = false;
       this.$emit('update:show', false);
-      this.count = 0;
-      this.calculate = 1;
+      this.ruleForm.type = 1;
+      this.ruleForm.stock = 0;
+      this.ruleForm.remark = '';
+      this.$refs.ruleForm.resetFields();
     },
     submit() {
-      if (this.calculate == 2) {
-        if (this.count > this.totalCount) {
-          this.count = this.totalCount;
-          this.$tips({ type: 'warning', message: '输入数量不能大于总数' });
+      this.$refs.ruleForm.validate((valid) => {
+        if (!valid) {
           return;
         }
-      }
-      if(this.count <= 0) {
-        this.$tips({ type: 'warning', message: '调整值不正确' });
+        if(this.ruleForm.type == 2 && this.totalCount < this.ruleForm.stock) {
+          this.$tips({ message: '调整目标值大于当前库存值', type: 'error' });
           return;
         }
-      let params = {
-        optType: this.calculate || 1, // 是	int	1: 增加; 2: 减少
-        count: this.count // 是	int	增加或者减少数量
+        const params = {
+          optType: this.ruleForm.type, // 1: 增加; 2: 减少
+          count: this.ruleForm.stock // 增加或者减少数量
         };
         this.$emit('handleSubmit', params);
+      });
     }
   },
-  computed: {
-    max() {
-      return this.calculate == 1 ? 100000 : this.totalCount;
-    },
-    stock() {
-      const num = this.calculate == 1 ? parseInt(this.totalCount) + parseInt(this.count) : parseInt(this.totalCount) - parseInt(this.count);
-      return num;
-    },
-  },
-  watch: {
-    calculate(val) {
-      this.count = 0;
-    }
-  }
 };
 </script>
 

src/components/libs/switch-page.vue

 <template>
   <el-popover v-if="!(project == '' || project == 'index')" placement="left-end" width="143" trigger="hover" popper-class="sw-page-pop">
     <div>
-      <ul class="toggle" v-for="(item, idx) in wfTypes" :key="idx">
-        <li v-show="('w-' + project) != item.code">
-          <router-link :to="item.target"><img :src="require(`@/assets/images/svg/${item.code}.svg`)" width="16" />{{ item.title }}</router-link>
+      <ul class="toggle">
+        <li v-show="!project.includes('gift')">
+          <router-link to="/gift-manage/real-gift"><img :src="require(`@/assets/images/svg/w-real-gifts.svg`)" width="16" />礼品</router-link>
+        </li>
+        <li v-show="!project.includes('card')">
+          <router-link to="/gic-card/list"><img :src="require(`@/assets/images/svg/w-gic-card.svg`)" width="16" />卡券</router-link>
         </li>
       </ul>
     </div>
@@ -14,14 +17,8 @@
 </template>
 
 <script>
-import { wfTypes } from '@/config/mapping/common';
 export default {
   name: 'SwitchPage',
-  data() {
-    return {
-      wfTypes
-    };
-  },
   computed: {
     project() {
       return this.$store.state.project;

src/views/card/card-package/form.vue

@@ -48,7 +48,7 @@
         <div class="imitation-table" v-if="couponList.length" style="width:100%;" v-loading="cardLoading">
           <el-row class="thead">
             <el-col :span="5">卡券信息</el-col>
-            <el-col :span="5">有效期</el-col>
+            <el-col :span="5">使用有效期</el-col>
             <el-col :span="4">卡券包内剩余库存</el-col>
             <el-col :span="4">福利可占库存</el-col>
             <el-col :span="3">福利状态</el-col>

src/views/card/card-package/list.vue

@@ -42,7 +42,7 @@
             <p :title="scope.row.remarkName" class="fz12 gray-lighter ellipsis-100" style="line-height:17px;">
               <el-popover placement="top-start" width="300" trigger="hover" open-delay="200" :offset="-8">
                 <div class="gray01 fz14">
-                  <p style="margin-bottom:5px;">卡券包id：{{ scope.row.couponPackageId }}</p>
+                  <p style="margin-bottom:5px;">卡券包ID：{{ scope.row.couponPackageId }}</p>
                   <p>更新时间：{{ formatDateTimeByType(scope.row.updateTime, 'yyyy-MM-dd hh:mm:ss') }}</p>
                 </div>
                 <i class="el-icon-question cursor fz12 gray-lighter" slot="reference"></i>
@@ -121,17 +121,36 @@
     <div class="clearfix">
       <dm-pagination class="fr mb0" v-if="tableList.length" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
     </div>
-    <adjust-stock ref="adjust" :show.sync="adjust.stock" :total-count="adjust.remainedStock" @handleSubmit="adjustStockBack" /><!-- 调整库存 -->
+    <adjust-stock ref="adjust" title="调整卡券包库存" width="660px" :show.sync="adjust.stock" :total-count="adjust.remainedStock" @handleSubmit="adjustStockBack">
+      <!-- 调整库存 -->
+      <p class="mt20 mb15 gray01">卡券明细</p>
+      <el-table v-loading="tableCardPackageLoading" :data="tableCardPackage" style="width: 100%">
+        <el-table-column prop="cardName" label="卡券名称"></el-table-column>
+        <el-table-column prop="date" label="使用有效期">
+          <template slot-scope="scope">
+            <span v-html="effectiveDateFormate(scope.row)"></span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="date" label="领取限制">
+          <template slot-scope="scope">{{ scope.row.getLimit }} 张/人</template>
+        </el-table-column>
+        <el-table-column prop="date" label="卡券类型">
+          <template slot-scope="scope">{{ cardType[scope.row.cardType].label || '--' }}</template>
+        </el-table-column>
+        <el-table-column prop="remainedStock" label="当前可占库存"></el-table-column>
+      </el-table>
+    </adjust-stock>
   </div>
 </template>
 
 <script>
+import { cardType } from '@/config/mapping/gic-card';
 import adjustStock from '@/components/libs/adjust-stock';
 import { page, formate } from '@/mixins/table.js';
 import { showConfirm } from '@/utils/common';
 import api from '@/api/card-package.js';
 import { formatDateTimeByType } from '@/utils/index.js';
-const { pageCouponPackage, deletePackage, updatePackageStock } = api;
+const { pageCouponPackage, deletePackage, updatePackageStock, getPackageDetail } = api;
 export default {
   name: 'CardPackageList',
   components: {
@@ -165,17 +184,44 @@ export default {
         couponPackageId: '',
         stock: false,
       },
-      isOpen: false
+      tableCardPackageLoading: false,
+      tableCardPackage: [], // 调整卡券包库存展示的slot table list
+      isOpen: false,
+      cardType,
     };
   },
   created() {
-    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券包', breadPath: '/card-package/list' }, { breadName: '卡券包列表' } ]);
+    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券包' }, { breadName: '卡券包列表' } ]);
   },
   mounted() {
     this.getTableList();
   },
   methods: {
     formatDateTimeByType,
+    effectiveDateFormate(item = {}) {
+      const { cardEffectiveMode, startDate, expireDate, effectTimeMode, expireTimeCount, effectTimeCount } = item;
+      if (cardEffectiveMode === 0) {
+        return `<p>${formatDateTimeByType(startDate, 'yyyy-MM-dd')} ~ </p><p>${ formatDateTimeByType(expireDate, 'yyyy-MM-dd') }</p>`;
+      }
+      if (cardEffectiveMode === 1) {
+      // 领取后第{{ info.effectTimeCount }}{{ info.effectTimeMode ? '月' : '天' }} - 第{{ info.expireTimeCount + info.effectTimeCount - 1 }}{{ info.effectTimeMode ? '月' : '天' }}
+        const unit = effectTimeMode ? '月' : '天';
+        let pre = '';
+        switch (effectTimeCount) {
+          case 1:
+            pre = '当';
+            break;
+          case 2:
+            pre = '次';
+            break;
+          default:
+            pre = effectTimeCount;
+            break;
+        }
+        return `<p>领取后${pre}${unit}生效，</p><p>有效天数${expireTimeCount}${unit}</p>`;
+      }
+      return '--';
+    },
     changeSort() {
       this.sortType1 = this.sortType1 === '' ? 'desc' : this.sortType1 === 'desc'  ? 'asc' : '';
       this.listParams.sortOrder = this.sortType1;
@@ -233,6 +279,14 @@ export default {
       this.adjust.stock = true;
       this.adjust.remainedStock = remainedStock;
       this.adjust.couponPackageId = couponPackageId;
+      this.tableCardPackageLoading = true;
+      getPackageDetail({ couponPackageId: couponPackageId }).then(res => {
+        this.tableCardPackage = res.result.couponList || [];
+        console.log(this.tableCardPackage);
+        this.tableCardPackageLoading = false;
+      }).catch(() => {
+        this.tableCardPackageLoading = false;
+      });
     },
     // 请求修改库存
     adjustStockBack(params) {

src/views/card/card-package/send-list.vue

@@ -124,7 +124,7 @@ export default {
     },
     changeTime(date) {
       if (new Date(this.dateTime[1]).getTime() - new Date(this.dateTime[0]).getTime() > 7 * 24 * 60 * 60 * 1000) {
-        this.$tips({ message: '领取时间段范围不能超过7天', type: 'warning' });
+        this.$tips({ message: '时间段范围不能超过7天', type: 'warning' });
         this.dateTime = [ ...this.dateTimeCopy ];
         return;
       }

src/views/card/gic-card/card-list.vue

@@ -64,7 +64,7 @@
           <p :title="scope.row.subTitle" class="fz12 gray-lighter ellipsis-100" style="line-height:17px;">
             <el-popover placement="top-start" width="300" trigger="hover" open-delay="200" :offset="-8">
               <div class="gray01 fz14">
-                <p style="margin-bottom:5px;">福利id：{{ scope.row.couponId }}</p>
+                <p style="margin-bottom:5px;">福利ID：{{ scope.row.couponId }}</p>
                 <p>更新时间：{{ formatDateTimeByType(scope.row.updateTime, 'yyyy-MM-dd hh:mm:ss') }}</p>
               </div>
               <i class="el-icon-question cursor fz12 gray-lighter" slot="reference"></i>
@@ -80,7 +80,7 @@
         </template>
       </el-table-column>
       <el-table-column label="领券限制" min-width="120">
-        <template slot-scope="scope">{{ scope.row.getLimit }} 张 / 人 </template>
+        <template slot-scope="scope">{{ scope.row.getLimit }} 张/人 </template>
       </el-table-column>
       <el-table-column prop="name" label="卡券成本(元)" min-width="130">
         <template slot-scope="scope">{{ scope.row.cardType == 0 || scope.row.cardType == 2 ? scope.row.costPrice : '--' }}</template>
@@ -95,8 +95,10 @@
             <i class="el-icon-question cursor fz12 gray-lighter" slot="reference" style="position:relative;"></i>
           </el-popover>
           {{ scope.row.remainedStock || 0 }}
-          <el-button v-if="[11, 12].includes(scope.row._status) && scope.row.customCodeFlag === 0" @click="preAdjustStock(scope.row)" class="hover-btn" icon="el-icon-edit-outline ml5" type="text"></el-button>
-          <el-button v-if="[11, 12].includes(scope.row._status) && scope.row.customCodeFlag == 2" class="hover-btn" @click="uploadCode(scope.row)" icon="iconfont-market4 icon-shangchuan" type="text"></el-button>
+          <!--  && scope.row.customCodeFlag == 0 -->
+          <el-button v-if="[1, 2].includes(scope.row._status)" @click="preAdjustStock(scope.row)" class="hover-btn" icon="el-icon-edit-outline ml5" type="text"></el-button>
+          <!--  && scope.row.customCodeFlag == 2 -->
+          <el-button v-if="[1, 2].includes(scope.row._status)" class="hover-btn ml5" @click="uploadCode(scope.row)" icon="iconfont-market4 icon-shangchuan" type="text"></el-button>
         </template>
       </el-table-column>
       <el-table-column label="卡券状态" min-width="120">
@@ -138,7 +140,7 @@
     <div class="clearfix">
       <dm-pagination class="fr mb0" v-if="tableList.length" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
     </div>
-    <adjust-stock ref="adjust" :show.sync="adjustStock" :total-count="currentCard.remainedStock" @handleSubmit="adjustStockBack" /><!-- 调整库存 -->
+    <adjust-stock ref="adjust" title="调整可占用库存" :show.sync="adjustStock" :total-count="currentCard.remainedStock" @handleSubmit="adjustStockBack" /><!-- 调整库存 -->
     <sync-stock :visible.sync="syncStock.visible" :coupon-id="syncStock.couponId" :type="1" @syncSuccess="getTableList" /><!-- 同步库存 -->
     <import-code :coupon-id="codeDialog.couponId" ref="importCode" :visible.sync="codeDialog.visible" @close="(len) => { if(len) { getTableList(); } }" /><!-- 导入券码 -->
   </div>

src/views/card/gic-card/module/import-code.vue

@@ -7,7 +7,7 @@
           <el-button :disabled="loading" class="dashed upload" icon="iconfont-market4 icon-shangchuan mr5">{{ loading ? '上传中' : '点击上传'}}</el-button>
         </el-upload>
         <el-button type="text" class="ml10" @click="downloadCouponCSV">点击下载CSV模板</el-button>
-        <el-button type="text" class="ml10 hover-btn deep" @click="viewErrorList">导入失败记录</el-button>
+        <!-- <el-button type="text" class="ml10 hover-btn deep" @click="viewErrorList">导入失败记录</el-button> -->
         <ul class="file-list">
           <li v-for="(f, idx) in fileList" :key="idx">
             <i class="el-icon-document gray03 fl"></i>