【筛选功能】 https://www.tapd.cn/39598945/prong/stories/view/1139598945001000051

src/components/order/index.vue

@@ -10,14 +10,42 @@
         v-if="$local.isRoot()"
       >导出</el-button>
       <div class="search-box">
-        <el-cascader
+        <!-- <el-cascader
          placeholder="选择产品/套餐"
          size="small"
         v-model="searchModel.pModel"
           :options="options"
           :props="{ checkStrictly: true}"
           clearable
-        ></el-cascader>
+        ></el-cascader> -->
+        <el-select
+          v-model="searchModel.ProductIds"
+          multiple
+          collapse-tags
+          style="margin-left: 10px;"
+          size=small
+          placeholder="请选择产品">
+          <el-option
+            v-for="item in products"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-select
+          v-model="searchModel.PackageNames"
+          multiple
+          collapse-tags
+          style="margin-left: 10px;"
+          size=small
+          placeholder="请选择套餐">
+          <el-option
+            v-for="item in packages"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
         <!-- <el-select v-model="searchModel.ProductId" placeholder="选择产品" clearable size="small">
           <el-option v-for="item in products" :key="item.Name" :label="item.Name" :value="item.Id"></el-option>
         </el-select> -->
@@ -27,6 +55,7 @@
           collapse-tags
           clearable
           size="small"
+          style="margin-left: 10px;"
           placeholder="选择类型"
         >
           <el-option v-for="item in types" :key="item.text" :label="item.text" :value="item.value"></el-option>
@@ -38,11 +67,13 @@
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          style="margin-left: 10px;"
         ></el-date-picker>
         <el-input
           v-model="searchModel.keyWord"
           placeholder="请输入订单号、订单名称、用户名"
           clearable
+          style="margin-left: 10px;"
           size="small"
         >
           <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
@@ -120,10 +151,31 @@ export default {
       retData: { TotalCount: 0, Data: [] },
       dateRange: [],
       products: [],
+      packages: [
+        {
+          label: '年卡',
+          value: '年卡'
+        }, {
+          label: '季卡',
+          value: '季卡'
+        }, {
+          label: '月卡',
+          value: '月卡'
+        }, {
+          label: '周卡',
+          value: '周卡'
+        }, {
+          label: '天卡',
+          value: '天卡'
+        }, {
+          label: '测试卡',
+          value: '测试卡'
+        }
+      ],
       searchModel: {
         PageIndex: 1,
-        ProductId: null,
-        PackageId: null,
+        ProductIds: [],
+        PackageNames: [],
         keyWord: '',
         Status: 0,
         PayType: 0,
@@ -169,8 +221,8 @@ export default {
   created () {
     this.$store.commit('setCurrentNav', '订单管理>>订单明细')
     this.get()
-    // this.getProduct()
-    this.getProductWithPackage()
+    this.getProduct()
+    // this.getProductWithPackage()
   },
   methods: {
     search () {
@@ -182,10 +234,6 @@ export default {
         this.searchModel.Btime = this.dateRange[0]
         this.searchModel.Etime = this.dateRange[1]
       }
-      if (this.searchModel.pModel.length > 0) {
-        this.searchModel.ProductId = this.searchModel.pModel[0]
-      }
-      if (this.searchModel.pModel.length > 0) { this.searchModel.PackageId = this.searchModel.pModel[1] }
       this.$api.get('course/v1/order/page', this.searchModel).then(res => {
         this.retData = res
       })
@@ -193,28 +241,34 @@ export default {
     getProduct () {
       this.loading = true
       this.$api.get('course/v1/product/page', this.searchModel).then(res => {
-        this.products = res.Data
+        res.Data.forEach(m => {
+          var product = {
+            label: m.Name,
+            value: m.Id
+          }
+          this.products.push(product)
+        })
         this.loading = false
       })
+      this.loading = false
     },
     getProductWithPackage () {
       this.loading = true
       this.$api.get('course/v1/product/ProductWithPackage').then(res => {
-        this.options = res.Data
         var options = []
         res.Data.forEach(m => {
           var product = {
             label: m.Product.Name,
-            value: m.Product.Id,
-            children: []
+            value: m.Product.Id
           }
+          this.products.push(product)
 
           m.Packages.forEach(p => {
             var pkg = {
               label: p.Name,
               value: p.Id
             }
-            product.children.push(pkg)
+            this.pa.push(pkg)
           })
           options.push(product)
         })

src/components/product/account.vue

@@ -8,20 +8,49 @@
       <!-- <el-button size="small" type="primary" icon="el-icon-edit">老账号认证</el-button> -->
 
       <div class="search-box">
-        <el-cascader
+        <!-- <el-cascader
          placeholder="选择产品/套餐"
          size="small"
         v-model="searchModel.pModel"
           :options="options"
           :props="{ checkStrictly: true}"
           clearable
-        ></el-cascader>
+        ></el-cascader> -->
+        <el-select
+          v-model="searchModel.ProductIds"
+          multiple
+          collapse-tags
+          style="width:200px;"
+          size=small
+          placeholder="请选择产品">
+          <el-option
+            v-for="item in products"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-select
+          v-model="searchModel.PackageNames"
+          multiple
+          collapse-tags
+          style="width:200px;"
+          size=small
+          placeholder="请选择套餐">
+          <el-option
+            v-for="item in packages"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
         <!-- <el-select v-model="searchModel.ProductId" placeholder="选择产品" clearable size="small">
           <el-option v-for="item in products" :key="item.Name" :label="item.Name" :value="item.Id"></el-option>
         </el-select> -->
         <el-select
           v-model="searchModel.accountTypes"
           multiple
+          style="width:150px;"
           collapse-tags
           clearable
           size="small"
@@ -31,13 +60,23 @@
         </el-select>
         <el-date-picker
           size="small"
+          style="width:200px"
+          v-model="dateRange1"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="账号开通"
+          end-placeholder="日期选择"
+        ></el-date-picker>
+        <el-date-picker
+          size="small"
+          style="width:200px"
           v-model="dateRange"
           type="daterange"
           range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
+          start-placeholder="账号到期"
+          end-placeholder="日期选择"
         ></el-date-picker>
-        <el-select v-model="searchModel.ExpirdDay" placeholder="选择过期时间" clearable size="small">
+        <el-select v-model="searchModel.ExpirdDay" placeholder="选择过期时间" style="width:100px" clearable size="small">
           <el-option
             v-for="item in expirdtypes"
             :key="item.text"
@@ -61,7 +100,7 @@
     >
       <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column prop="UserCode" label="会员">
-        <template slot-scope="scope"> 
+        <template slot-scope="scope">
           <phoneHide :text="scope.row.UserCode"></phoneHide>
         </template>
       </el-table-column>
@@ -85,8 +124,8 @@
       <el-table-column label="操作" width="140px">
         <template slot-scope="scope">
           <span class="handel cursor edit" @click="selectUser(scope.row)">归属</span>
-          <span class="handel cursor edit" @click="del(scope.row)">删除</span>       
-          <span class="handel cursor edit" @click="online(scope.row)">查看在线</span> 
+          <span class="handel cursor edit" @click="del(scope.row)">删除</span>
+          <span class="handel cursor edit" @click="online(scope.row)">查看在线</span>
         </template>
       </el-table-column>
     </el-table>
@@ -102,23 +141,23 @@
     </div>
     <userDrawer ref="userDrawer" @select="onSelect"></userDrawer>
      <el-dialog title="查看在线" :visible.sync="showOnlineDialog" width="900px" v-loading="loadingOnline">
-       <el-table  
+       <el-table
       row-key="Id"
       border
       size="medium"
       :data="onlineClient"
-      :height="$getHeight(300)"     
+      :height="$getHeight(300)"
     >
       <el-table-column prop="Account" label="账号"></el-table-column>
       <el-table-column prop="LoginTime" label="登录时间"></el-table-column>
-      <el-table-column prop="OnlineTime" label="在线时间"></el-table-column>     
+      <el-table-column prop="OnlineTime" label="在线时间"></el-table-column>
       <el-table-column prop="ServerIP" label="服务器Ip"></el-table-column>
       <el-table-column prop="LoginIP" label="登录ip"></el-table-column>
       <el-table-column prop="UpStream" label="上行" ></el-table-column>
       <el-table-column prop="DownStream" label="下行"></el-table-column>
       <el-table-column label="操作" width="140px">
         <template slot-scope="scope">
-          <span class="handel cursor edit" @click="killout(scope.row)">强制离线</span>         
+          <span class="handel cursor edit" @click="killout(scope.row)">强制离线</span>
         </template>
       </el-table-column>
     </el-table>
@@ -127,75 +166,100 @@
 </template>
 <script>
 export default {
-  name: "treeTable",
+  name: 'treeTable',
   components: {
-    userDrawer: () => import("@/components/common/userDrawer"),
-     phoneHide: () => import("@/components/common/phonehide")
+    userDrawer: () => import('@/components/common/userDrawer'),
+    phoneHide: () => import('@/components/common/phonehide')
   },
-  data() {
+  data () {
     return {
-       options: [],
-      showOnlineDialog:false,
-      loading: false,    
-      loadingOnline:false,
+      options: [],
+      showOnlineDialog: false,
+      loading: false,
+      loadingOnline: false,
       retData: { TotalCount: 0, Data: [] },
       products: [],
+      packages: [
+        {
+          label: '年卡',
+          value: '年卡'
+        }, {
+          label: '季卡',
+          value: '季卡'
+        }, {
+          label: '月卡',
+          value: '月卡'
+        }, {
+          label: '周卡',
+          value: '周卡'
+        }, {
+          label: '天卡',
+          value: '天卡'
+        }, {
+          label: '测试卡',
+          value: '测试卡'
+        }
+      ],
       dateRange: [],
+      dateRange1: [],
       searchModel: {
         ExpirdDay: -1,
         UserId: 0,
         PageIndex: 1,
-        keyWord: "",
-        ProductId: null,
-        PackageId:null,
+        keyWord: '',
+        ProductIds: [],
+        PackageNames: [],
         accountTypes: null,
-        pModel:[],
-        Btime: "",
-        Etime: "",
+        pModel: [],
+        Btime: '',
+        Etime: '',
+        Bktime: '',
+        Ektime: ''
       },
-      onlineClient:[],      
+      onlineClient: [],
       currentAccount: {},
       account: [],
       types: [
-        { text: "新开", value: 1 },
-        { text: "批量新开", value: 2 },
-        { text: "续费", value: 3 },
-        { text: "批量续费", value: 4 },
-        { text: "老账号认证", value: 100 },
-        { text: "测试", value: 200 }
+        { text: '新开', value: 1 },
+        { text: '批量新开', value: 2 },
+        { text: '续费', value: 3 },
+        { text: '批量续费', value: 4 },
+        { text: '老账号认证', value: 100 },
+        { text: '测试', value: 200 }
       ],
       expirdtypes: [
-        { text: "全部", value: -1 },
-        { text: "已过期", value: 0 },
-        { text: "1天过期", value: 1 },
-        { text: "3天过期", value: 3 },
-        { text: "1周过期", value: 7 }
+        { text: '全部', value: -1 },
+        { text: '已过期', value: 0 },
+        { text: '1天过期', value: 1 },
+        { text: '3天过期', value: 3 },
+        { text: '1周过期', value: 7 }
       ],
-      typeFormat(row, column, cellValue, index) {
+      typeFormat (row, column, cellValue, index) {
         switch (cellValue) {
           case 1:
-            return "新开";
+            return '新开'
           case 2:
-            return "批量新开";
+            return '批量新开'
           case 3:
-            return "续费";
+            return '续费'
           case 4:
-            return "批量续费";
+            return '批量续费'
           case 100:
-            return "老账号认证";
+            return '老账号认证'
           case 200:
-            return "测试";
+            return '测试'
         }
-        return "";
+        return ''
       }
-    };
+    }
   },
   created () {
     this.$store.commit('setCurrentNav', '会员管理>>账号管理')
     var userId = this.$route.query.userId
     if (userId) this.searchModel.UserId = userId
     this.get()
-    this.getProductWithPackage()
+    // this.getProductWithPackage()
+    this.getProduct()
     // eslint-disable-next-line camelcase
     let user_info = this.$local.getUserByCache().Manager.RealName
     // eslint-disable-next-line camelcase
@@ -210,42 +274,49 @@ export default {
   },
   methods: {
     search () {
-      this.searchModel.PageIndex=1;
-      this.get();
+      this.searchModel.PageIndex = 1
+      this.get()
     },
-    get() {
-      if (this.dateRange && this.dateRange.length == 2) {
-        this.searchModel.Btime = this.dateRange[0];
-        this.searchModel.Etime = this.dateRange[1];
+    get () {
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.searchModel.Btime = this.dateRange[0]
+        this.searchModel.Etime = this.dateRange[1]
+      }
+      if (this.dateRange1 && this.dateRange1.length === 2) {
+        this.searchModel.Bktime = this.dateRange1[0]
+        this.searchModel.Ektime = this.dateRange1[1]
       }
-      if(this.searchModel.pModel.length>0)
-        this.searchModel.ProductId=this.searchModel.pModel[0];
-     if(this.searchModel.pModel.length>0)
-        this.searchModel.PackageId=this.searchModel.pModel[1];
       this.$api
-        .get("course/v1/productaccount/page", this.searchModel)
+        .get('course/v1/productaccount/page', this.searchModel)
         .then(res => {
-          this.retData = res;
-        });
+          this.retData = res
+        })
     },
-    getProduct() {
-      this.loading = true;
-      this.$api.get("course/v1/product/page", this.searchModel).then(res => {
-        this.products = res.Data;
-        this.loading = false;
-      });
+    getProduct () {
+      this.loading = true
+      this.$api.get('course/v1/product/page', this.searchModel).then(res => {
+        res.Data.forEach(m => {
+          var product = {
+            label: m.Name,
+            value: m.Id
+          }
+          this.products.push(product)
+        })
+        this.loading = false
+      })
+      this.loading = false
     },
-    getProductWithPackage() {
-      this.loading = true;
-      this.$api.get("course/v1/product/ProductWithPackage").then(res => {
-        this.options = res.Data;
-        var options = [];
+    getProductWithPackage () {
+      this.loading = true
+      this.$api.get('course/v1/product/ProductWithPackage').then(res => {
+        this.options = res.Data
+        var options = []
         res.Data.forEach(m => {
           var product = {
             label: m.Product.Name,
             value: m.Product.Id,
             children: []
-          };
+          }
 
           m.Packages.forEach(p => {
             var pkg = {
@@ -254,116 +325,119 @@ export default {
             }
             product.children.push(pkg)
           })
-          options.push(product);
-        });
-        this.options=options;
-        this.loading = false;
-      });
+          options.push(product)
+        })
+        this.options = options
+        this.loading = false
+      })
     },
-    del(item) {
-      var that = this;
-      this.$confirm("确定删除？", "", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
+    del (item) {
+      var that = this
+      this.$confirm('确定删除？', '', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       }).then(_ => {
         this.$api
-          .post("course/v1/productaccount/Delete?id=" + item.Id)
+          .post('course/v1/productaccount/Delete?id=' + item.Id)
           .then(res => {
-            that.get();
-          });
-      });
+            that.get()
+          })
+      })
     },
-    dels() {
-      var that = this;
-      if( this.account.length==0){
+    dels () {
+      var that = this
+      if (this.account.length === 0) {
+        // eslint-disable-next-line no-undef
         $this.$warn('请选账号')
         return
       }
-      var ids= this.account.map(m => m.Id)
-      this.$confirm("确定删除？", "", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
+      var ids = this.account.map(m => m.Id)
+      this.$confirm('确定删除？', '', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       }).then(_ => {
         this.$api
-          .post("course/v1/productaccount/Deletes",ids)
+          .post('course/v1/productaccount/Deletes',ids)
           .then(res => {
-            that.searchModel.PageIndex=1;
-            that.get();
-          });
-      });
+            that.searchModel.PageIndex = 1
+            that.get()
+          })
+      })
     },
-    goAdd() {
-      this.$router.push({ name: "addPackage", query: { optype: 1 } });
+    goAdd () {
+      this.$router.push({ name: 'addPackage', query: { optype: 1 } })
     },
-    goEdit(item) {
+    goEdit (item) {
       this.$router.push({
-        name: "addPackage",
+        name: 'addPackage',
         query: { id: item.Id, optype: 2 }
-      });
+      })
     },
-    batchSelectUser() {
+    batchSelectUser () {
       if (this.account.length == 0) {
-        this.$warn("请选择账号");
-        return;
+        this.$warn('请选择账号')
+        return
       }
-      this.$refs["userDrawer"].show();
+      this.$refs['userDrawer'].show()
     },
-    selectUser(row) {
-      this.$refs.multipleTable.clearSelection();
-      this.$refs.multipleTable.toggleRowSelection(row);
-      this.$refs["userDrawer"].show();
+    selectUser (row) {
+      this.$refs.multipleTable.clearSelection()
+      this.$refs.multipleTable.toggleRowSelection(row)
+      this.$refs['userDrawer'].show()
     },
-    handleSelectionChange(val) {
-      this.account = val;
+    handleSelectionChange (val) {
+      this.account = val
     },
-    onSelect(item) {
+    onSelect (item) {
       var data = {
         AccountIds: this.account.map(m => m.Id),
         UserId: item.Id
-      };
-      this.$confirm("确定要迁移吗？").then(_ => {
-        this.$api.post("course/v1/productaccount/BindUser", data).then(res => {
-          this.get();
-        });
-      });
-    },
-    online(item){
-      this.showOnlineDialog=true;
-      this.loadingOnline=true;
-      var params={
-        productId:item.ProductId,
-        account:item.Account,
       }
-      this.onlineClient=[];
+      this.$confirm('确定要迁移吗？').then(_ => {
+        this.$api.post('course/v1/productaccount/BindUser', data).then(res => {
+          this.get()
+        })
+      })
+    },
+    online (item) {
+      this.showOnlineDialog = true
+      this.loadingOnline = true
+      var params = {
+        productId: item.ProductId,
+        account: item.Account
+      }
+      this.onlineClient = []
       this.$api
-        .get("course/v1/productaccount/OnLine", params)
+        .get('course/v1/productaccount/OnLine', params)
         .then(res => {
-          this.loadingOnline=false,
-          this.onlineClient = res.Data;
-          this.onlineClient.forEach(m=>m.info=item)
+          // eslint-disable-next-line no-unused-expressions
+          this.loadingOnline = false,
+          this.onlineClient = res.Data
+          // eslint-disable-next-line no-return-assign
+          this.onlineClient.forEach(m => m.info = item)
         })
     },
-    killout(item){
-       var params={
-        productId:item.info.ProductId,
-        id:item.Id,
+    killout (item) {
+      var params = {
+        productId: item.info.ProductId,
+        id: item.Id
       }
-       this.$api
-          .get("course/v1/productaccount/KillOut",params)
-          .then(res => {
-            if(res.Data){
-               this.$info("离线成功");
-            }
-            this.online(item.info)
-          })     
+      this.$api
+        .get('course/v1/productaccount/KillOut', params)
+        .then(res => {
+          if (res.Data) {
+            this.$info('离线成功')
+          }
+          this.online(item.info)
+        })
     },
-    dataExport(){
-      this.$api.getDownloadFile("/course/v1/productaccount/Export");
+    dataExport () {
+      this.$api.getDownloadFile('/course/v1/productaccount/Export')
     }
   }
-};
+}
 </script>
 <style scoped>
 .red {