yos_web/src/SManagement/project_target/modules/detailInfo.vue

<template>
  <basicDetails
      ref="details"
      :titleText="'年度目标' + mainData.year + '年'"
      :oldFormPath="{edit:'HManagement/personalTarget/target/modules/edit/components'}"
      :editData="mainData"
      :mainAreaData="mainAreaData"
      :turnPageId="20220909154602"
      idname="sa_salestargetbillid"
      ownertable="sa_salestargetbill"
      tags=""
      :tabs="['项目清单','系统信息']"
      @pageChange="pageChange"
      @onEditSuccess="queryMainData($route.query.id)"
      @onTabClick="onTabClick"
      :pageChange="true"
      :hideTags="true"
      >
    <div slot="customOperation">
      <!-- 此区域提供了自定义操作按钮 -->

<!--        <issue :data="mainData" @onSuccess="onSuccess"></issue>
      <adjustment :data="mainData" @onSuccess="onSuccess" ></adjustment>
      <close v-if="mainData.status === '已下达'" :data="mainData" @onClose="onSuccess"></close>
      <importFile class="inline-16"  accept=".xlsx" :folderid="folderid" :bindData="{ownertable:'sa_salestargetbill',ownerid:'',usetype:'default'}" @onImportSuccess="onImportSuccess">
        <a class="error-link" v-if="errorurl" :href="errorurl" slot="errorFile">下载错误数据</a>
      </importFile>-->
    </div>

    <div slot="slot0">
      <div class="mt-10">
        <project_add v-if="tool.checkAuth($route.name,'addProject') && mainData.status === '新建'"  :id="this.$route.query.id" :year="this.$route.query.year" @onSuccess="onSuccess" :disabled="disable" class="inline-16"></project_add>
        <el-input  style="width:200px;" placeholder="请输入搜索内容" suffix-icon="el-icon-search" @input="searchChange" v-model="params.content.where.condition" @keyup.native.enter="getprojectTargetList(params.content.pageNumber = 1)" @clear="getprojectTargetList(params.content.pageNumber = 1)" size="small" class="input-with-select inline-16" clearable>
        </el-input>
      </div>
      <tableLayout ref="list" :layout="tablecols" :data="list" :custom="true" height="300">
<!--        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname === 'point'">33333</div>
          <div v-else ></div>
        </template>-->
        <template v-slot:customcol="scope">
          <el-input size="mini" v-if="(scope.column.columnname === 'target_l' || scope.column.columnname === 'target_h' ) && actindex === scope.column.data.rowindex" v-model="scope.column.data[scope.column.columnname]"></el-input>
          <div v-else-if="scope.column.columnname === 'point'">
            <el-date-picker
                v-if="actindex === scope.column.data.rowindex"
                v-model="date"
                type="month"
                size="mini"
                placeholder="选择月"
                :picker-options="pickerOptions">
            </el-date-picker>
            <p v-else>{{scope.column.data.point > 10?scope.column.data.year + '-' + scope.column.data.point:scope.column.data.year + '-0' + scope.column.data.point}}</p>
          </div>
          <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
        </template>

        <template v-slot:opreation="scope">
          <el-button type="text" size="mini" class="inline-16"  @click="edit(scope.data)" v-if="editShow && tool.checkAuth($route.name,'editProjectTask')" :disabled="disable || mainData.status !== '新建'">编辑</el-button>
          <el-button type="text" style="color: #e09a1a" size="mini" class="inline-16" v-if="saveShow && actindex === (scope.data.index + 1)" @click="save(scope.data)">保存</el-button>
          <project_del class="inline-16" :status="mainData.status" v-if="editShow && tool.checkAuth($route.name,'deleteProject')" :data="scope.data" @onDel="onProjectSuccess" :disabled="disable || mainData.status !== '新建'"></project_del>
        </template>
      </tableLayout>
      <div>
        <div  class="container normal-panel" style="text-align:right">
          <div style="float: left">
            <label class="search__label">项目总数：</label>
            {{total}}</div>
          <div style="float: left;margin-left: 20px">
            <label class="search__label" style="width: 160px">项目基本目标(万元)：</label>{{target_l}}</div>
          <div style="float: left;margin-left: 20px" ><label class="search__label" style="width: 160px">项目挑战目标(万元)：</label>{{target_h}}</div>
          <el-pagination
              background
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
      </div>

      </div>
<!--        <targetTable ref="list" class="container normal-panel">
        <template  v-slot:editTarget="scope">
          <editTarget v-if="tool.checkAuth($route.name,'update')" style="display:inline" :year="mainInfo.year" :data="scope.data" @onSuccess="onSuccess"></editTarget>
        </template>
        <template  v-slot:del="scope">
          <ondel v-if="tool.checkAuth($route.name,'delete')" :data="scope.data" @onSuccess="onSuccess"></ondel>
        </template>
      </targetTable>-->
    </div>
    <div slot="slot1">
      <detail_information ref="detailed"></detail_information>
    </div>
  </basicDetails>
</template>

<script>
import detail_information from './components/detailedInformation'
import project_add from './components/projectAdd/index.vue'
import project_del from './components/delProject'
export default {
  components:{detail_information,project_add,project_del},
  data(){
    return {
      pickerOptions:{
        disabledDate(time){
          return time.getTime() < Date.now()
        }
      },
      disable:false,
      actindex:0,
      mainData:{},
      mainAreaData:[],
      editShow:true,
      saveShow:false,
      tablecols:'',
      target_l:0,
      target_h:0,
      list:[],
      total:0,
      currentPage:0,
      date:'',
      params: {
        "id": 20220906104002,
        "content": {
          "year": this.$route.query.year,
          "hrid": this.$route.query.id,
          "where": {
            "condition": ""
          },
          "pageNumber": 1,
          "pageSize": 20
        }
      }
    }
  },
  methods:{
    onTabClick(){
      this.$nextTick(e=>{
        /*this.$refs.list? this.$refs.list.queryData():''*/
        this.$refs.detailed? this.$refs.detailed.detailedList(this.mainData):''
      })
    },
    async queryMainData(id){
      console.log(this.$route.query.year)
      const res = await this.$api.requested({
        "id": 20220906094602,
        "content": {
          "year": this.$route.query.year,
          "hrid": id,
         /* "sa_salestargetbillid": 2*///可不传
        },
      })
      this.mainData = res.data
      console.log(this.mainData)
      if (this.$route.query.id === this.$route.query.ownerHrid){
        this.disable = false
      }else{
        this.disable = true
      }
      this.changeDataStructure()
      this.getprojectTargetList()
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex) {
      this.$router.replace({path:'/projectDetail',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    changeDataStructure(){
      this.mainAreaData = [
        {
          label:'部门',
          value:this.mainData.depname
        },
        {
          label:'姓名',
          value:this.mainData.name
        },
        {
          label:'职位',
          value:this.mainData.position
        },
        /*{
          label:'营销区域',
          value:this.mainData.areaname
        },*/
        {
          label:'状态',
          value:this.mainData.status
        }
      ]
    },
    /* 获取项目目标数据 */
    async getprojectTargetList() {
      /*this.params.content.hrid = this.hrid*/
      let res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      console.log("获取项目数据")
      console.log(this.list);
      const total_target_l = []
      this.list.forEach((i,index)=>{
        /*total_target_l[index] = i.target_l*/
        this.target_l = this.target_l + i.target_l
        this.target_h = this.target_h + i.target_h
      })

    },
    searchChange(){
      this.getprojectTargetList()
    },
    onSuccess(){
      this.queryMainData(this.$route.query.id)
    },
    onProjectSuccess(){
      this.getprojectTargetList()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },
    edit(rowIndex){
      console.log("输出")
      console.log(rowIndex)
      this.actindex = rowIndex.index + 1
      if (rowIndex.point < 10){
        this.date = rowIndex.year + '-0' + rowIndex.point
      }else {
        this.date = rowIndex.year + '-' + rowIndex.point
      }
      this.saveShow = true
      this.editShow = false
    },
    async save(row){
      console.log("保存数据")
      console.log(row)
      console.log(this.date)
      const dateNow = new Date(this.date)
      const month = dateNow.getMonth() +1
     /* const datenow = new Date()*/
      console.log(dateNow.getFullYear(),this.$route.query.year)
      if (dateNow.getFullYear() != this.$route.query.year){
          this.open()
      }else {
        console.log(month)
        this.saveShow = false
        this.editShow = true
        this.actindex = 0
        const res = await this.$api.requested({
          "id": 20220906112602,
          "content": {
            "sa_salestargetid": row.sa_salestargetid,
            "target_l": row.target_l,
            "target_h": row.target_h,
            "month":month
          },
        })
        this.tool.showMessage(res,()=>{
          this.getprojectTargetList()
        })
      }

    },
    open() {
      this.$confirm('只能填写目标年度的月份!', '提示', {
        confirmButtonText: '确定',
        showCancelButton:false,
        closeOnClickModal:false,
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '请重新填写!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
  created() {
    this.queryMainData(this.$route.query.id)
    this.tablecols = this.tool.tabelCol(this.$route.name).projectTargetTable.tablecols
    console.log(this.$route.query.id)
    console.log(this.$route.query.ownerHrid)
    if (this.$route.query.id === this.$route.query.ownerHrid){
      this.disable = false
    }else {
      this.disable = true
    }
    console.log(this.disable)
  }
}
</script>
<style>

</style>