yos_web/src/HManagement/personalTarget/target/modules/edit/index.vue

<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="$t('年度目标') + mainData.year + '年'"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        :turnPageId="20220901132502"
        idname="sa_salestargetbillid"
        ownertable="sa_salestargetbill"
        delApiId="20221118103402"
        tags=""
        :tabs="[$t('人员目标详情'),$t('详细信息')]"
        :statusCheck="[{key:'status',value:'已下达'},{key:'status',value:'关闭'}]"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)"
        @onTabClick="onTabClick">
      <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>
        <restore v-if="tool.checkAuth($route.name,'restore')" :data="mainData" class="inline-16" @restSuccess="onSuccess"></restore>
        <importFile  v-if="mainData.status === '新建'" 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">{{ $t('下载错误数据') }}</a>
        </importFile>
      </div>

      <div slot="slot0">
        <addPerson  v-if="tool.checkAuth($route.name,'personalTargetManage')"  style="margin-bottom: 10px" :data="mainData" @addSuccess="onSuccess"></addPerson>
        <targetTable ref="list" >
          <template  v-slot:editTarget="scope">
            <editTarget class="inline-16" v-if="tool.checkAuth($route.name,'personalTargetManage')" :disabled="mainData.status != '新建'" style="display:inline" :year="mainData.year" :data="scope.data" @onSuccess="onSuccess"></editTarget>
            <el-button type="text"  v-if="tool.checkAuth($route.name,'personalTargetManage')" :disabled="mainData.status != '新建' " size="small" @click="delShow(scope.data.hrid)">{{$t('删 除')}}</el-button>
          </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>
  </div>
</template>

<script>
import add from './components/add.vue'
import ondel from './components/del.vue'
import editTarget from './components/editTarget.vue'
import importFile from './components/importFile.vue'
import restore from './components/restore.vue'

import targetTable from './components/table.vue'
import detail_information from './modules/detailedInformation/index'
import issue from '../issue'
import adjustment from '../adjustment'
import close from '../close'
import addPerson from './components/addPerson'

export default {
  components:{
    targetTable,
    add,
    ondel,
    editTarget,
    importFile,
    detail_information,
    issue,
    adjustment,
    close,
    addPerson,
    restore
  },
  data () {
    return {
      mainData:{},
      mainAreaData:[],
      mainInfo:{},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      errorurl:null
    }
  },
  methods:{
    onTabClick () {
      // setTimeout(e=>{
      //   this.$refs.list.queryData(this.mainData.year)
      // },2000)
      // console.log(this.$refs.list)
      this.$nextTick(e=>{
        this.$refs.list? this.$refs.list.queryData(this.mainData.year):''
        this.$refs.detailed? this.$refs.detailed.detailedList(this.mainData):''
      })
    },
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id": 20220901140402,
        "content": {
          "sa_salestargetbillid": id
        }
      })
      this.mainData = res.data
      console.log(this.mainData)
      this.$refs.list.queryData(this.mainData.year)
      /*this.$refs.detailed.detailedList(this.mainData)*/
      this.changeDataStructure()
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex) {
      this.flag = false
      this.$router.replace({path:'/personalTarget_edit',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    changeDataStructure(){
      let that = this
      this.mainAreaData = [
        {
          label:this.$t('年度'),
          value:this.mainData.year
        },
        {
          label:this.$t('编制方式'),
          value:this.mainData.targettype
        },
        {
          label:this.$t('人员数'),
          value:this.mainData.peoplecount
        },
        {
          label:this.$t('状态'),
          value:this.$t(this.mainData.status),
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '新建':
                style = {color:'#3874f6'}
                break;
              case '已下达':
                style = {color:'#67C23A'}
                break;
              case '关闭':
                style = {color:'#cccccc'}
                break;
              default:
                break;
            }
            return style
          }
        }
      ]
    },
    onSuccess () {
      console.log("执行")
     this.queryMainData(this.$route.query.id)
    },
    async onImportSuccess (res) {
      let attachmentid = res.data.attachmentids[0]
      const res1 = await this.$api.requested({
        "id": 20220913092702,
        "content": {
          "attachmentid":attachmentid,
          "sa_salestargetbillid":this.$route.query.id,
          "year":this.mainData.year
        },
      })
      if (res1.msg !== '成功') {
        this.errorurl = res1.msg
      } else {
        this.errorurl = null
      }
      if (this.errorurl) {
        this.$message({
          message:this.$t('导入失败请查看错误文件'),
          type:'warning'
        })
      } else {
        this.tool.showMessage(res1,()=>{
          this.onSuccess()
        })
      }

    },
    delShow(data){
      this.$confirm(this.$t('此操作将删除该人员的人员目标, 是否继续?'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        console.log('删除')
        console.log(data)
        this.onDel(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('已取消删除')
        });
      });
    },
    async onDel(data){
      const res = await this.$api.requested({
        "id": 20220901111202,
        "content": {
          "sa_salestargetbillid": this.$route.query.id,
          "hrid": [data]
        },
      })
      this.tool.showMessage(res,()=>{
        this.onSuccess()
      })
    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
    console.log("人员目标id"+this.$route.query.id)
  },
  created () {
    /*this.onlyread = this.$route.query.type === 'onlyread'?true:false*/
  }
}

</script>
<style>
</style>