朱鑫波 4 years ago
parent
commit
e30144439e
1 changed files with 110 additions and 17 deletions
  1. 110 17
      src/views/modules/autoLaunch/configProject/index.vue

+ 110 - 17
src/views/modules/autoLaunch/configProject/index.vue

@@ -176,7 +176,7 @@
         <a-card>
             <div class="table-page-search-wrapper">
                 <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="handleQueryList">
-                    <a-row :gutter="24">
+                    <a-row :gutter="24" v-if="tabKey === 1">
                         <a-col :md="8" :sm="8" :xxl="6">
                             <a-form-item label="项目名称">
                                 <a-input
@@ -225,18 +225,52 @@
                             </span>
                         </a-col>
                     </a-row>
+                    <a-row :gutter="24" v-else>
+                        <a-col :span="24" style="margin-bottom:15px" v-if="projectId">
+                            <a-tag color="blue" closable @close="getAccountNoProject" v-if="projectId">
+                                {{ projectId.name }}
+                            </a-tag>
+                        </a-col>
+                        <a-col :md="8" :sm="8" :xxl="6">
+                            <a-form-item label="账户名称">
+                                <a-input
+                                    v-decorator="['authName']"
+                                    type="text"
+                                    placeholder="请输入需要搜索的账户名称"
+                                />
+                            </a-form-item>
+                        </a-col>
+
+                        <a-col :md="8" :sm="8" :xxl="6">
+                            <a-form-item label="数据周期">
+                                <a-range-picker
+                                    :disabled-date="disabledDate"
+                                    format="YYYY-MM-DD"
+                                    v-decorator="['timeRange', { initialValue: [moment(), moment()] }]"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="8" :sm="8" :xxl="6">
+                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+                                <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
+                                <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
+                                    >重置</a-button
+                                >
+                            </span>
+                        </a-col>
+                    </a-row>
                 </a-form>
             </div>
         </a-card>
 
         <a-row style="margin-bottom:15px;margin-top:12px">
             <a-col :span="24">
-                <div class="tableBody">
+                <div class="tableBody" style="min-height:200px">
                     <a-table
                         :columns="columns"
                         :dataSource="dataSource"
-                        :pagination="ipagination"
-                        :loading="loading"
+                        :pagination="false"
+                        :loading="dataLoading"
                         bordered
                         @change="tableChange"
                         :scroll="{ x: 2500 }"
@@ -246,13 +280,21 @@
                         ref="accountTable"
                     >
                         <span slot="dataStatus" slot-scope="text, record">
-                            <a-switch :checked="text == 0" @change="onChangeStatus(text, record)" :loading="spinning" />
+                            <a-switch
+                                :checked="text == 0"
+                                @change="onChangeStatus(text, record)"
+                                :loading="spinning"
+                                v-if="record.projectName !== ''"
+                            />
+                        </span>
+                        <span slot="projectName" slot-scope="text, record">
+                            <a @click="toAccountDetail(record)">{{ text }}</a>
                         </span>
                         <span slot="allAccountCount" slot-scope="text, record">
-                            {{ record.successCount + '/' + text }}
+                            {{ record.projectName !== '' ? record.successCount + '/' + text : '-' }}
                         </span>
                         <span slot="action" slot-scope="text, record">
-                            <div v-if="record.successCount !== '-'">
+                            <div v-if="record.projectName !== ''">
                                 <a>出价</a>
                                 <a-divider type="vertical" />
                                 <a>编辑</a>
@@ -279,6 +321,17 @@
                         <span slot="photoClick" slot-scope="text">{{ text | formatCurrency }}</span>
                         <span slot="photoShow" slot-scope="text">{{ text | formatCurrency }}</span>
                     </a-table>
+                    <a-pagination
+                        size="small"
+                        :showTotal="ipagination.showTotal"
+                        style="float: right;margin-top:10px"
+                        v-if="dataSource.length > 0"
+                        showQuickJumper
+                        :pageSize.sync="ipagination.pageSize"
+                        :total="ipagination.total"
+                        v-model="ipagination.current"
+                        @change="getDataSource"
+                    />
                 </div>
             </a-col>
         </a-row>
@@ -607,11 +660,21 @@ export default {
 
             target: 'charge',
             order: 'descend',
-            projectId: undefined
+            projectId: undefined,
+            dataLoading: false,
+            url: '/kuaishouProjectStrategy/queryProjectList'
         }
     },
     methods: {
         moment,
+        getDataSource(current, pageSize) {
+            // 切换分页时的回调,
+            // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+            this.ipagination.current = current
+            this.ipagination.pageSize = pageSize
+            const paramsData = this.form.getFieldsValue()
+            this.handleGetTableList(paramsData)
+        },
         onChangeStatus(text, rescord) {},
         handleQueryList(event) {
             this.ipagination.current = 1
@@ -622,7 +685,10 @@ export default {
         handleResetForm() {
             this.ipagination.current = 1
             this.form.resetFields()
-            this.projectId = undefined
+            if (this.tabKey == 1) {
+                this.projectId = undefined
+            }
+
             const paramsData = this.form.getFieldsValue()
             this.handleGetTableList(paramsData)
             this.$refs.selectTable.keyValue = ''
@@ -630,8 +696,9 @@ export default {
         },
         handleGetTableList(data) {
             let paramsData = {
-                templateName: data.name,
-                projectId: this.projectId,
+                projectName: data.projectName,
+                authName: data.authName,
+                projectId: this.projectId ? this.projectId.id : null,
                 userId: data.userId,
                 startTime:
                     data.timeRange && data.timeRange.length === 2
@@ -657,12 +724,17 @@ export default {
             }
             this.dataSource = []
             this.dataLoading = true
-            postAction('/kuaishouProjectStrategy/queryProjectList', paramsData)
+            postAction(this.url, paramsData)
                 .then(result => {
                     this.dataLoading = false
                     if (result.code === 200) {
-                        this.dataSource = result.result.list || []
-                        this.ipagination.total = result.result.total || 0
+                        this.dataSource = result.result.pageInfo.list || []
+                        if (result.result.total) {
+                            this.dataSource.unshift(result.result.total)
+                        }
+
+                        this.ipagination.total = result.result.pageInfo.total || 0
+                        // result.result.total
                     } else {
                         this.$message.error(result.message)
                     }
@@ -672,6 +744,21 @@ export default {
                     console.log(error, 'eeee')
                 })
         },
+        getAccountNoProject() {
+            this.projectId = undefined
+            const paramsData = this.form.getFieldsValue()
+            this.handleGetTableList(paramsData)
+        },
+        toAccountDetail(item) {
+            this.tabKey = 2
+            this.projectId = { id: item.projectId, name: item.projectName }
+            this.url =
+                this.tabKey == 1
+                    ? '/kuaishouProjectStrategy/queryProjectList'
+                    : '/kuaishouProjectStrategy/queryAccountList'
+            const paramsData = this.form.getFieldsValue()
+            this.handleGetTableList(paramsData)
+        },
         disabledDate(current) {
             // Can not select days before today and today
             return current && current > moment().endOf('day')
@@ -689,8 +776,13 @@ export default {
         tabChange(key) {
             this.ipagination.current = 1
             this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
-
-            this.handleGetTableList({})
+            this.url =
+                this.tabKey == 1
+                    ? '/kuaishouProjectStrategy/queryProjectList'
+                    : '/kuaishouProjectStrategy/queryAccountList'
+            this.projectId = undefined
+            const paramsData = this.form.getFieldsValue()
+            this.handleGetTableList(paramsData)
         },
         operateChange(value) {
             console.log(value)
@@ -806,7 +898,8 @@ export default {
         }
     },
     mounted() {
-        this.handleGetTableList()
+        const paramsData = this.form.getFieldsValue()
+        this.handleGetTableList(paramsData)
         this.getAllOperator()
     },
     activated: function() {},