付费产品配置模块

src/router/modules/products.js

@@ -17,6 +17,14 @@ export default[
             title:'单品配置'
         }
       },
+      {
+        path:'addSingle',
+        component:()=>import('@/views/products/components/addSingleList.vue'),
+        name:'addSingle',
+        meta:{
+            title:'添加单品'
+        }
+      },
       {
         path:'packageConfigList',
         component:()=>import('@/views/products/PackageConfigList.vue'),

src/views/products/SingleConfigList.vue

@@ -3,7 +3,8 @@ import { ref, reactive } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import {apiProductsConfig} from '@/api/products'
 import { apiMediaCommon } from '@/api/media'
-import addSingleList from './components/addSingleList.vue'
+import { useRouter } from 'vue-router'
+const router=useRouter()
 const tableColumns = [
     {
         label:'产品名称',
@@ -70,10 +71,7 @@ const options = ref([
     }
 ])
 const tableData = ref([])
-const show = ref(false)
 const labelOptions = ref([])
-const userId = ref('')
-const isAdd = ref(false)
 const tableQuery = reactive({
     keyWord:'',
     currentPage:1,
@@ -125,23 +123,17 @@ function handleSortChange({order,prop}){
     tableQuery.sortType = order==='ascending'?1:0
     getTableData()
 }
-// 查看用户详情
-function Details(row) {
-    if (row.ReadCount <= 0) return;
-    show.value = true;
-    userId.value = row.Id + '';
-}
 function handleSelectChange() {
     getTableData();
 }
 </script>
 
 <template>
-    <el-card class="box-card">
-        <div class="temp-user-list-wrap" v-if="!isAdd">
+    <el-card>
+        <div class="temp-user-list-wrap">
             <div class="top-box">
                 <div>
-                    <el-button type="primary" style="margin-right: 20px;" @click="isAdd = true">添加单品</el-button>
+                    <el-button type="primary" style="margin-right: 20px;" @click="router.push('/products/addSingle')">添加单品</el-button>
                     <el-select v-model="tableQuery.ProductType"  @change="handleSelectChange()" placeholder="请选择" style="width: 200px; margin-right: 20px;">
                         <el-option
                         v-for="item in options"
@@ -199,11 +191,6 @@ function handleSelectChange() {
                         <template #default="scope" v-if="column.key === 'AccountStatus'">
                             <el-tag :type="scope.row[column.key]=== 'Open' ?'success':'info'">{{scope.row[column.key]=== 'Open'?'已开户':'未开户' }}</el-tag>
                         </template>
-                        <template #default="scope" v-else-if="column.key === 'ReadCount'">
-                            <span class="ReadCount" @click="Details(scope.row)">
-                                {{ scope.row[column.key] }}
-                            </span>
-                        </template>
                         <template #default="scope" v-else>
                             {{scope.row[column.key]}}
                         </template>
@@ -220,7 +207,6 @@ function handleSelectChange() {
                 />
             </div>
         </div>
-        <addSingleList :show="isAdd" @close="isAdd = false" :labelOptions="labelOptions"></addSingleList>
     </el-card>
 </template>
 

src/views/products/components/addSingleList.vue

@@ -1,23 +1,10 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import {apiProductsConfig} from '@/api/products'
+import { apiMediaCommon } from '@/api/media'
 import { Search } from '@element-plus/icons-vue'
-
-const show = defineModel('show', { type: Boolean, default: false })
-const props=defineProps({
-    labelOptions:{
-        type:Array,
-        default:[]
-    },
-})
-watch(() => props.show, (newval) => {
-  if (newval) {
-    console.log(newval);
-    
-    getTableData()
-  }
-})
-const emits = defineEmits(["close"])
+import { useRouter } from 'vue-router'
+const router=useRouter()
 const tableColumns = [
     {
         label:'产品名称',
@@ -62,6 +49,7 @@ const tableColumns = [
     },
 ]
 const tableData = ref([])
+const labelOptions = ref([])
 const tableQuery = reactive({
     keyWord:'',
     currentPage:1,
@@ -70,6 +58,9 @@ const tableQuery = reactive({
     ProductType:'report',
     PermissionIds:null,
 })
+
+getTableData()
+getLableList()
 function getTableData(){
     apiProductsConfig.getUnSetProductList({
         Keyword:tableQuery.keyWord,
@@ -83,6 +74,12 @@ function getTableData(){
         tableQuery.totals = res.Data.Paging.Totals||0
     })
 }
+function getLableList(){
+    apiMediaCommon.getPermissionList().then(res=>{
+        if(res.Ret!==200) return
+        labelOptions.value = res.Data.List||[]
+    })
+}
 function handlePageChange(page){
     tableQuery.currentPage = page
     getTableData()
@@ -100,88 +97,89 @@ function handleSelectChange(){
     getTableData()
 }
 function close() {
-    emits("close")
+    router.push('/products/singleConfigList')
 }
 function stockProducts(row){
     console.log(row);
-    
 }
 </script>
 
 <template>
-<div class="dialog-content" v-if="props.show">
-    <div>
-        <el-radio-group v-model="tableQuery.ProductType" size="large" @change="handleSelectChange()">
-            <el-radio-button label="报告" value="report" />
-            <el-radio-button label="音视频" value="audio" />
-        </el-radio-group>
-    </div>
-    <div class="top-box">
-        <div>
-            <!-- <el-select v-model="tableQuery.ProductType" clearable  @change="handleSelectChange()" placeholder="请选择" style="width: 250px; margin-right: 20px;">
-                <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-                </el-option>
-            </el-select> -->
-            <el-cascader
-                filterable
-                :options="props.labelOptions"
-                collapse-tags
-                placeholder="请选择品种"
-                v-model="tableQuery.PermissionIds" 
-                @change="handleSelectChange()"
-                :props="{
-                    value:'id',
-                    label:'name',
-                    emitPath:false,
-                    multiple:true
-                }"
-                style="width: 250px; margin-right: 20px;"
-                clearable>
-            </el-cascader>
-            <el-input 
-                v-model="tableQuery.keyWord"
-                :prefix-icon="Search" clearable
-                style="width:250px"
-                placeholder="产品名称" 
-                @input="handlePageChange(1)"
-            />
-        </div>
-        <div>
-            <el-button type="primary" plain @click="close">返回</el-button>
+    <el-card>
+        <div class="dialog-content">
+            <div>
+                <el-radio-group v-model="tableQuery.ProductType" size="large" @change="handleSelectChange()">
+                    <el-radio-button label="报告" value="report" />
+                    <el-radio-button label="音视频" value="audio" />
+                </el-radio-group>
+            </div>
+            <div class="top-box">
+                <div>
+                    <!-- <el-select v-model="tableQuery.ProductType" clearable  @change="handleSelectChange()" placeholder="请选择" style="width: 250px; margin-right: 20px;">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select> -->
+                    <el-cascader
+                        filterable
+                        :options="labelOptions"
+                        collapse-tags
+                        placeholder="请选择品种"
+                        v-model="tableQuery.PermissionIds" 
+                        @change="handleSelectChange()"
+                        :props="{
+                            value:'id',
+                            label:'name',
+                            emitPath:false,
+                            multiple:true
+                        }"
+                        style="width: 250px; margin-right: 20px;"
+                        clearable>
+                    </el-cascader>
+                    <el-input 
+                        v-model="tableQuery.keyWord"
+                        :prefix-icon="Search" clearable
+                        style="width:250px"
+                        placeholder="产品名称" 
+                        @input="handlePageChange(1)"
+                    />
+                </div>
+                <div>
+                    <el-button type="primary" plain @click="close">返回</el-button>
+                </div>
+            </div>
+            <div class="table">
+                <el-table :data="tableData" @sort-change="handleSortChange" border>
+                    <el-table-column 
+                        v-for="column in tableColumns" :key="column.key"
+                        :prop="column.key" :label="column.label" :sortable="column.sortable" :align="column.align" :width="column.widthsty"
+                        :min-width="column.minwidthsty || ''">
+                        <template #default="scope" v-if="column.key==='ReadDurationMinutes'">
+                            <el-input v-model="scope.row[column.key]" placeholder="请输入数字" />
+                        </template>
+                        <template #default="scope" v-else-if="column.key==='handle'">
+                            <span class="stock" @click="stockProducts(scope.row)">保存并上架</span>
+                        </template>
+                        <template #default="scope" v-else>
+                            {{scope.row[column.key]}}
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <el-pagination
+                    background
+                    layout="total,prev,pager,next,jumper"
+                    :current-page="tableQuery.currentPage"
+                    :page-size="tableQuery.pageSize"
+                    :total="tableQuery.totals"
+                    @current-change="handlePageChange"
+                    style=" justify-content: flex-end; margin-top:50px;"
+                />
+            </div>
         </div>
-    </div>
-    <div class="table">
-        <el-table :data="tableData" @sort-change="handleSortChange" border>
-            <el-table-column 
-                v-for="column in tableColumns" :key="column.key"
-                :prop="column.key" :label="column.label" :sortable="column.sortable" :align="column.align" :width="column.widthsty"
-                :min-width="column.minwidthsty || ''">
-                <template #default="scope" v-if="column.key==='ReadDurationMinutes'">
-                    <el-input v-model="scope.row[column.key]" placeholder="请输入数字" />
-                </template>
-                <template #default="scope" v-else-if="column.key==='handle'">
-                    <span class="stock" @click="stockProducts(scope.row)">保存并上架</span>
-                </template>
-                <template #default="scope" v-else>
-                    {{scope.row[column.key]}}
-                </template>
-            </el-table-column>
-        </el-table>
-        <el-pagination
-            background
-            layout="total,prev,pager,next,jumper"
-            :current-page="tableQuery.currentPage"
-            :page-size="tableQuery.pageSize"
-            :total="tableQuery.totals"
-            @current-change="handlePageChange"
-            style=" justify-content: flex-end; margin-top:50px;"
-        />
-    </div>
-</div>
+    </el-card>
 </template>
 
 <style scoped lang="scss">