yos_web/src/SManagement/sales_forecast/index.vue

<template>
  <div class="sales">
    <div class="container normal-panel">
      <p class="normal-title normal-margin">预测提报任务</p>
      <div class="header-handle">
        <Search @searchActive="searchActive" @clearData="clearData" />
        <DownSelect @selectChange="categoryChange" @clearCategory="clearCategory" title="提报要求:"
          :list="[{label:'按产品类别预测',value:'0'},{label:'按项目及产品类别预测',value:'1'}]" style="margin-right:16px" />
      </div>
      <tableLayout v-if="salesPanelList" :layout="tablecols" :data="salesPanelList" :custom="true" height="30vh"
        @rowClick="rowClick">
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname == 'periodtype'">
            <span>
              {{scope.column.data.periodpoint | timer(scope.column.data[scope.column.columnname])}}
            </span>
          </div>
          <div v-else-if="scope.column.columnname == 'baseonproject'">
            <span v-if="scope.column.data[scope.column.columnname] == '1'">按项目及产品类别预测</span>
            <span v-else>按产品类别预测</span>
          </div>
          <div v-else-if="scope.column.columnname == 'date'">
            <span>{{scope.column.data.begdate}}至{{scope.column.data.enddate}}</span>
          </div>
          <span v-else>{{scope.column.data[scope.column.columnname]}}</span>
        </template>
        <template v-slot:opreation="scope">
          <el-button type="text" size="small" @click="addBuill(scope)"
            v-if="tool.checkAuth($route.name,'create_sales')">创建提报</el-button>
        </template>
      </tableLayout>
      <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
        @pageChange="pageChange" style="margin-top:16px;display:flex;justify-content: flex-end;">
      </pagination>
    </div>
    <div class="container normal-panel" style="margin-top:16px">
      <p class="normal-title normal-margin">销售预测记录</p>
      <div class="header-handle">
        <Search @searchActive="searchActive2" @clearData="clearData2" />
        <time-select @clearSelect="clearTime" @timeChange="timeChange" title="提报时间:"></time-select>
      </div>
      <tableLayout :layout="tablecols2" :data="historyList" :custom="true" height="30vh">
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname == 'periodtype'">
            <span>
              {{scope.column.data.periodpoint | timer(scope.column.data[scope.column.columnname])}}
            </span>
          </div>
          <div v-else-if="scope.column.columnname == 'baseonproject'">
            <span v-if="scope.column.data[scope.column.columnname] == '1'">按项目及产品类别预测</span>
            <span v-else>按产品类别预测</span>
          </div>
          <span v-else>{{scope.column.data[scope.column.columnname]}}</span>
        </template>
        <template v-slot:opreation="scope">
          <el-button type="text" size="small" @click="goDetail(scope.data)"
            v-if="tool.checkAuth($route.name,'read') && scope.data.isoverdue == 1">详情</el-button>
          <el-button type="text" size="small" @click="goEdit(scope.data)"
            v-else-if="tool.checkAuth($route.name,'update') && scope.data.isoverdue == 0">编辑</el-button>
        </template>
      </tableLayout>
    </div>

  </div>
</template>

<script>
import Header from '@/SManagement/archives_upload/components/Header'
import Search from '@/components/search/index'
import DownSelect from '@/components/down_select/index'
import TimeSelect from '@/SManagement/submitedit_one/components/TimeSelect'
import Pagination from '@/components/pagination/Pagination'
import { log } from '@antv/g2plot/lib/utils'
export default {
  name: '',
  data () {
    return {
      params: {
        "id": 20220906154403,
        "version": 1,
        "content": {
          "nocache": true,
          "pageNumber": 1,
          "pageSize": 12,
          "where": {
            "condition": "",
            "baseonproject": "",
            "begindate": '',
            "enddate": ''
          }
        }
      },
      /* 销售模板list */
      salesPanelList: '',
      /* 当前选中的模板id */
      selectPanelId: '',
      /* 提报记录数据 */
      historyList: [],
      tablecols: '',
      tablecols2: '',
      total: 0,
      /* 开始时间 */
      begindate: '',
      /* 结束时间 */
      enddate: '',
      condition:''
    };
  },
  components: { Header, Search, DownSelect, TimeSelect, Pagination },
  computed: {
  },
  watch: {
  },
  filters: {
    timer (val, type) {
      if (type == '月') {
        return '每月' + val.substr(1, val.length - 2) + '日'
      } else {
        return '每周' + val.substr(1, val.length - 2)
      }
    }
  },
  created () {
    this.getSalesPanel()
    this.tablecols = this.tool.tabelCol(this.$route.name).SalesPanelTable.tablecols
    this.tablecols2 = this.tool.tabelCol(this.$route.name).salesHistoryTable.tablecols
  },
  methods: {
    /* 获取销售预测模板 */
    async getSalesPanel () {
      let res = await this.$api.requested(this.params)
      this.salesPanelList = res.data
      this.total = res.total
      this.historyList = []
      console.log(res);
    },
    /* 获取提报记录数据 */
    async getSalesDetail () {
      let res = await this.$api.requested({
        "id": 20220908134403,
        "version": 1,
        "content": {
          "nocache": true,
          "sa_salesforecastmodelid": this.selectPanelId,
          "where": {
            "begindate": this.begindate,
            "enddate": this.enddate,
            "condition":this.condition
          }
        }
      })
      this.historyList = res.data
      console.log(this.historyList);
    },
    async rowClick (data) {
      this.selectPanelId = data.sa_salesforecastmodelid
      this.getSalesDetail()

    },
    /* 创建提报 */
    async addBuill (data) {
      let res = await this.$api.requested({
        "id": 20220913154403,
        "version": 1,
        "content": {
          "sa_salesforecastmodelid": data.data.sa_salesforecastmodelid,
          "sa_salesforecastbillid": 0,
          "sa_projectids": data.data.baseonproject == 1 ? [] : [0]
        }
      })
      if (res.code == 0) {
        this.$notify({
          title: '提示',
          message: res.msg,
          type: 'warning'
        })
      } else {
        console.log(res);
        this.$router.push({ path: data.data.baseonproject == 1 ? '/edit_sales' : '/edit_product', query: { id: res.data[0].sa_salesforecastbillid, id2: data.data.sa_salesforecastmodelid, header: 'panel' } })
      }
    },
    /* 前往详情页 */
    goDetail (data) {
      if (data.baseonproject == 0) {
        this.$router.push({ path: '/product_detail', query: { id: data.sa_salesforecastbillid } })
      } else {
        this.$router.push({ path: '/project_detail', query: { id: data.sa_salesforecastbillid, type: 'product' } })
      }
    },
    /* 前往编辑页 */
    goEdit (data) {
      /* 跳转到产品编辑页 */
      if (data.baseonproject == 0) {
        this.$router.push({ path: '/edit_product', query: { id: data.sa_salesforecastbillid, id2: data.sa_salesforecastmodelid } })
        /* 跳转到项目编辑页 */
      } else {
        this.$router.push({ path: '/edit_sales', query: { id: data.sa_salesforecastbillid, id2: data.sa_salesforecastmodelid, type: 'project' } })
      }
    },
    pageChange (n) {
      this.params.content.pageNumber = n
      this.getSalesPanel()
    },
    /* 模板搜索 */
    searchActive (data) {
      this.params.content.where.condition = data
      this.params.content.pageNumber = 1
      this.getSalesPanel()
    },
    /* 模板清除搜索 */
    clearData () {
      this.params.content.where.condition = ''
      this.params.content.pageNumber = 1
      this.getSalesPanel()
    },
    /* 提报搜索 */
    searchActive2 (data) {
      this.condition = data
      this.params.content.pageNumber = 1
      this.getSalesDetail()
    },
    /* 提报清除搜索 */
    clearData2 () {
      this.condition = ''
      this.params.content.pageNumber = 1
      this.getSalesDetail()
    },
    /* 清除分类 */
    clearCategory () {
      this.params.content.where.baseonproject = ''
      this.params.content.pageNumber = 1
      this.getSalesPanel()
    },
    /* 分类改变 */
    categoryChange (data) {
      console.log(222);
      this.params.content.where.baseonproject = data
      this.params.content.pageNumber = 1
      this.getSalesPanel()
    },
    /* 时间赛选改变 */
    timeChange (time) {
      this.begindate = time[0]
      this.enddate = time[1]
      this.getSalesDetail()
    },
    /* 清除时间赛选 */
    clearTime () {
      this.begindate = ''
      this.enddate = ''
      this.getSalesDetail()
    },
  },
};
</script>

<style scoped>
.sales .header-handle {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
</style>