车型套餐关联

src/components/BaseRemoteSelect/index.vue

@@ -48,6 +48,7 @@ export default {
         pageNum: 1,
         pageSize: 999
       },
+      opened: false,
     }
   },
   computed: {
@@ -67,7 +68,7 @@ export default {
   watch: {
     value: {
       handler(nv, ov) {
-        if (isEmpty(ov) && !isEmpty(nv) && this.loadApi) {
+        if (isEmpty(ov) && !isEmpty(nv) && !this.opened && this.loadApi) {
           this.loadData(nv);
         } 
       },
@@ -102,7 +103,10 @@ export default {
     // 下拉框可见性变化
     handleVisibleChange(visible) {
       if (visible) {
+        this.opened = true;
         this.getOptions();
+      } else {
+        this.opened = false;
       }
     },
     // 全选
@@ -123,6 +127,7 @@ export default {
         let item = this.options.find(item => value.includes(item[this.prop]));
         this.$emit('change', item);
       }
+      this.selectedValue = value;
     },
     // 获取选项
     getOptions() {

src/components/ImagePreview/index.vue

@@ -4,6 +4,7 @@
     fit="cover"
     :style="`width:${realWidth};height:${realHeight};`"
     :preview-src-list="realSrcList"
+    :class="{ 'blur-effect': blur }"
   >
     <div slot="error" class="image-slot">
       <i class="el-icon-picture-outline"></i>
@@ -28,6 +29,10 @@ export default {
     height: {
       type: [Number, String],
       default: ""
+    },
+    blur: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -86,5 +91,10 @@ export default {
     color: #909399;
     font-size: 30px;
   }
+  &.blur-effect {
+    ::v-deep .el-image__inner {
+      filter: blur(5px);
+    }
+  }
 }
 </style>

src/views/bst/model/components/ModelEditDialog.vue

@@ -51,7 +51,6 @@
             v-model="form.suitIds"
             :query="suitQuery"
             multiple
-            :init-options="initSuitOptions"
             :before-get-options="beforeOpenSuit"
           />
         </form-col>
@@ -148,16 +147,6 @@ export default {
         userId: this.form.userId
       }
     },
-    // 套餐初始化选项
-    initSuitOptions() {
-      if (this.form.suitList == null || this.form.suitList.length === 0) {
-        return [];
-      }
-      return this.form.suitList.map(item => ({
-        id: item.id,
-        name: item.name
-      }));
-    }
   },
   methods: {
     handleChangeUser() {

src/views/bst/model/index.vue

@@ -77,7 +77,7 @@
               {{d.row[column.key]}}
             </template>
             <template v-else-if="column.key === 'lowBatteryReminderSwitch'">
-              <boolean-tag :value="d.row[column.key]" true-text="开启" false-text="关闭"/>
+              <boolean-tag :value="d.row[column.key]" true-text="开启" false-text="关闭" size="mini"/>
               <template v-if="d.row.lowBatteryReminderSwitch">
                 {{d.row.lowBatteryReminder | dv}} %
               </template>
@@ -91,6 +91,9 @@
             <template v-else-if="column.key === 'userName'">
               <user-link :id="d.row.userId" :text="d.row.userName" />
             </template>
+            <template v-else-if="column.key === 'suitNames'">
+              <el-tag type="primary" v-for="suitName of d.row.suitNames" :key="suitName" size="mini" style="margin-right: 4px;">{{suitName | dv}}</el-tag>
+            </template>
             <template v-else>
               {{d.row[column.key]}}
             </template>
@@ -169,8 +172,9 @@ export default {
         {key: 'fullVoltage', visible: true, label: '满电电压', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'lowVoltage', visible: true, label: '亏电电压', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'fullEndurance', visible: true, label: '满电续航', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'remark', visible: true, label: '备注', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'lowBatteryReminderSwitch', visible: true, label: '低电量提醒', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'suitNames', visible: true, label: '应用套餐', minWidth: "200", sortable: false, overflow: false, align: 'center', width: null},
+        {key: 'remark', visible: true, label: '备注', minWidth: null, sortable: true, overflow: true, align: 'center', width: null},
         {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
       ],
       // 排序方式

src/views/bst/realName/index.vue

@@ -64,7 +64,7 @@
               {{d.row[column.key]}}
             </template>
             <template v-else-if="column.key === 'picture'">
-              <image-preview :src="d.row[column.key]" :width="50" :height="50" />
+              <image-preview :src="d.row[column.key]" :width="50" :height="50" blur/>
             </template>
             <template v-else-if="column.key === 'status'">
               <dict-tag :options="dict.type.real_name_status" :value="d.row[column.key]" />

src/views/bst/suit/components/SuitEditDialog.vue

@@ -15,6 +15,15 @@
         <form-col :span="span"  label="套餐名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入套餐名称" />
         </form-col>
+        <form-col :span="24"  label="适用车型" prop="modelIds">
+          <model-remote-select 
+            :before-get-options="beforeGetModelOptions"
+            v-model="form.modelIds" 
+            multiple 
+            :query="modelQuery" 
+            style="width: 100%;" 
+          />
+        </form-col>
         <form-col :span="span"  label="套餐类型" prop="type">
           <el-select v-model="form.type" placeholder="请选择套餐类型" style="width: 100%;">
             <el-option
@@ -205,10 +214,11 @@ import { SuitRentalUnit, SuitRidingRule, SuitStatus, RoleKeys, SuitType } from '
 import CollapsePanel from '@/components/CollapsePanel/index.vue';
 import { deepClone, dictLabel } from '@/utils';
 import { mapGetters } from 'vuex';
+import ModelRemoteSelect from '@/components/Business/Model/ModelRemoteSelect.vue';
 
 export default {
   name: 'SuitEditDialog',
-  components: { FormCol, UserInput, CollapsePanel },
+  components: { FormCol, UserInput, CollapsePanel, ModelRemoteSelect },
   dicts: ['suit_status', 'suit_rental_unit', 'suit_riding_rule', 'suit_type'],
   props: {
     visible: {
@@ -313,9 +323,21 @@ export default {
       return (value) => {
         return dictLabel(this.dict.type.suit_rental_unit, value);
       }
+    },
+    modelQuery() {
+      return {
+        userId: this.form.userId,
+      }
     }
   },
   methods: {
+    beforeGetModelOptions() {
+      if (this.form.userId == null) {
+        this.$message.warning("请先选择用户");
+        return false;
+      }
+      return true;
+    },
     // 添加计费规则
     addRidingRule(index) {
       let current = this.form.intervalRule[index];
@@ -354,6 +376,7 @@ export default {
         freeRideTime: null,
         rentalUnit: SuitRentalUnit.MINUTE,
         ridingRule: SuitRidingRule.START,
+        modelIds: [],
         startRule: {
           startingTime: 60,
           startingPrice: 5,

src/views/bst/suit/index.vue

@@ -133,6 +133,9 @@
             <template v-else-if="column.key === 'userName'">
               <user-link :id="d.row.userId" :text="d.row.userName" />
             </template>
+            <template v-else-if="column.key === 'modelNames'">
+              <el-tag type="primary" v-for="modelName of d.row.modelNames" :key="modelName" size="mini" style="margin-right: 4px;">{{modelName | dv}}</el-tag>
+            </template>
             <template v-else>
               {{d.row[column.key]}}
             </template>
@@ -210,8 +213,9 @@ export default {
         {key: 'instructions', visible: true, label: '说明', minWidth: null, sortable: true, overflow: true, align: 'center', width: null},
         {key: 'freeRideTime', visible: true, label: '免费时长', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'orderNum', visible: true, label: '排序', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'seconds', visible: true, label: '可用时长', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'seconds', visible: true, label: '可用时长', minWidth: null, sortable: true, overflow: false, align: 'center', width: "180"},
-        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'modelNames', visible: true, label: '适用车型', minWidth: "200", sortable: false, overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "180"},
       ],
       // 排序方式
       orderSorts: ['ascending', 'descending', null],