yos_web/src/SManagement/sales_forecast/modules/editSales.vue

<template>
  <div>
    <!--模板头部-->
    <div class="container normal-panel" v-if="$route.query.header == 'panel'">
      <p class="normal-title normal-margin">模板信息</p>
      <el-descriptions :column="3" v-if="detail">
          <el-descriptions-item label="模板编号">{{detail.billnum?detail.billnum:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="提报要求">
            <span v-if="detail.baseonproject == '1'">按项目及产品类别预测</span>
            <span v-else>按产品类别预测</span>
          </el-descriptions-item>
          <el-descriptions-item label="提报周期">{{detail.periodpoint | timer(detail.periodtype)}}</el-descriptions-item>
          <el-descriptions-item label="模板名称">{{detail.title?detail.title:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="提报有效期">{{detail.begdate}}至{{detail.enddate}}</el-descriptions-item>
          <el-descriptions-item label="备注">暂无</el-descriptions-item>
      </el-descriptions>
    </div>
    <!--提报头部-->
    <div class="container normal-panel" v-else>
      <p class="normal-title normal-margin">基础信息</p>
      <el-descriptions :column="3" v-if="detail">
          <el-descriptions-item label="单号">{{detail.billnum?detail.billnum:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="预测模板">{{detail.title?detail.title:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="提报周期">{{detail.periodpoint | timer(detail.periodtype)}}</el-descriptions-item>
          <el-descriptions-item label="提报要求">
            <span v-if="detail.baseonproject == '1'">按项目及产品类别预测</span>
            <span v-else>按产品类别预测</span>
          </el-descriptions-item>
          <el-descriptions-item label="提报人">{{detail.createby}}</el-descriptions-item>
          <el-descriptions-item label="部门">{{detail.depname}}</el-descriptions-item>
          <el-descriptions-item label="职位">{{detail.position}}</el-descriptions-item>
          <el-descriptions-item label="提报时间">{{detail.createdate}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="container normal-panel" style="margin-top:16px">
      <p class="normal-title normal-margin">提报内容</p>
      <div class="handle">
        <div class="left">
          <Search @searchActive="searchActive" @clearData="clearData" />
          <!-- <DownSelect title="提报要求:" :list="[{value:'按产品类别'},{value:'按产品类别 + 项目'}]" style="margin-right:16px" /> -->
        </div>
        <div class="right">
          <add-project v-if="tool.checkAuth($route.name,'add_project')" @addSuccess="getSubmitList"/>
        </div>
      </div>
    </div>
    <merge-table v-if="list" :layout="tablecols" :custom="true" :data1="list" :endFalse="true">
      <template v-slot:customcol="scope">
        <span v-if="scope.column.data[scope.column.columnname]">{{scope.column.data[scope.column.columnname]}}</span>
        <span v-if="!scope.column.data[scope.column.columnname] && scope.column.columnname != 'product_handle' && scope.column.columnname != 'project_handle'">-</span>
      </template>
      <template v-slot:product_handle="scope">
        <div style="display:flex">
          <Edit v-if="tool.checkAuth($route.name,'update')" :editData="scope.data" :tablecols="addProductTablecols" @editSuccess="getSubmitList" />
          <delete v-if="tool.checkAuth($route.name,'delete')" :rowData="scope.data" :projectid="0" @deleteSuccess="getSubmitList"/>
        </div>
      </template>
      <template v-slot:project_handle="scope">
        <div style="display:flex">
          <add-product v-if="tool.checkAuth($route.name,'add_product')" :data1="scope" type="project" :productList="productList" :tablecols="addProductTablecols" @addSuccess="getSubmitList" />
          <delete v-if="tool.checkAuth($route.name,'delete')" :rowData="scope.data" :projectid="scope.data.sa_projectid" @deleteSuccess="getSubmitList" />
        </div>
      </template>
    </merge-table>
  </div>
</template>

<script>
import Search from '@/components/search/index'
import DownSelect from '@/components/down_select/index'
import addProject from '../components/addProject'
import mergeTable from '../components/mergeTable'
import Edit from '../components/edit'
import Delete from '../components/delete'
import addProduct from '../components/addProduct'
export default {
  name: '',
  data() {
    return {
      id:this.$route.query.id,
      detail:'',
      list:'',
      tablecols:'',
      /* 添加产品表格 */
      addProductTablecols:'',
      /* 产品表 */
      productDetailTable:'',
      productList:'',
      condition:''
    };
  },
  components:{Search, DownSelect , addProject , mergeTable , Edit , Delete , addProduct},
  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.getHeaderDetail()
    this.getProductList()
    this.tablecols = this.tool.tabelCol(this.$route.name).salesEditTable.tablecols
    this.productDetailTable = this.tool.tabelCol(this.$route.name).productDetailTable.tablecols
    this.addProductTablecols = this.tool.tabelCol(this.$route.name).addProductTable.tablecols
    console.log(this.addProductTablecols);
    
  },
  methods: {
    /* 获取详情表头数据 */
    async getHeaderDetail() {
      let res
      if(this.$route.query.type == 'panel') {
        res = await this.$api.requested({
          "id": 20220906154603,
          "version":1,
          "content": {
              "sa_salesforecastmodelid":this.$route.query.id2
          }
        })
        this.detail = res.data
      } else {
        res = await this.$api.requested({
          "id": 20220914104603,
          "version":1,
          "content": {
              "sa_salesforecastbillid":this.id
          }
        })
        this.detail = res.data[0]
      }
      this.getSubmitList()
      console.log(this.detail);
    },
    /* 获取详情提报内容数据 */
    async getSubmitList() {
      let res = await this.$api.requested({
          "id": 20220906154703,
          "version":1,
          "content": {
              "nocache":true,
              "sa_salesforecastbillid":this.id,
              "where":{
                  "condition": this.condition
              }
          }
      })
      this.list = res.data.filter(item => item.projectnum)
    },
    /* 获取所有产品数据 */
    async getProductList() {
      let res = await this.$api.requested({
          "id": 20220906154903,
          "version":1,
          "content": {
          }
      })
      this.productList = res.data
      console.log(this.productList);
    },
    searchActive(data) {
      this.condition = data
      this.getSubmitList()
    },
    clearData() {
      this.condition = ''
      this.getSubmitList()
    }
  },
};
</script>

<style scoped>
  .handle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .handle .left {
    display: flex;
    align-items: center;
  }
</style>