yos_web/src/HManagement/personalTarget/target/modules/add.vue

<template>
  <div>
    <el-button type="primary" size="small" @click="dialogTableVisible = true">新 建</el-button>
    <el-dialog
        title="新建人员目标年度"
        :visible.sync="dialogTableVisible"
        width="370px"
        append-to-body
        @close="onCancel"
        >
      <div class="panel_Target">
        <el-row style="margin-top: 3%">
          <el-col :span="4" :offset="1">
            <div style="width: 100%;text-align: right">
              <label class="normal-margin inline-16" style="margin-top: 8%">年度:</label>
            </div>
          </el-col>
          <el-col :span="18">
            <el-date-picker
                style=" width: 100%;"
                class="normal-margin inline"
                v-model="form.year"
                type="year"
                value-format="yyyy"
                placeholder="选择要创建的年度"
                :clearable="false"
                size="small"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
      <div class="dialog-footer ">
        <el-button size="small" @click="onCancel" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary"  @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-dialog>
<!--    <el-drawer
        title="新建目标"
        append-to-body
        :visible.sync="dialogTableVisible"
        size="60%"
        direction="rtl"
        @close="dialogTableVisible = false">
      <div class="drawer__panel">
        <p class="normal-margin inline-16" >年度:</p>
        <el-date-picker
          class="normal-margin"
          v-model="form.year"
          type="year"
          value-format="yyyy"
          placeholder="选择年"
          size="small">
        </el-date-picker>
        <div class="flex-align-center normal-margin flex-between">
          <p>请选择人员:</p>
          <div class="flex-align-center">
            <p>搜索:&nbsp;</p>
            <el-input style="width:250px" size="small" placeholder="人员姓名" v-model="condition" @keyup.native.enter="listData(params.content.pageNumber=1)" @clear="listData(params.content.pageNumber=1)" clearable></el-input>
          </div>
        </div>
        <tablelayout class="normal-margin" :layout="tablecols" :data="list" :custom="true" :checkbox="true" height="calc(100vh - 452px)" @checkboxCallBack="checkboxCallBack">
          <template v-slot:customcol="scope">
            <p>{{scope.column.data[scope.column.columnname]}}</p>
          </template>
        </tablelayout>
        &lt;!&ndash; <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.content.pageNumber"
          :page-size="params.content.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination> &ndash;&gt;
        <div class="flex-align-center">
          <p>已选{{selection.length}}人</p>&nbsp;
          <p>总共{{list.length}}人</p>
        </div>
        <div class="dialog-footer fixed__btn__panel">
          <el-button size="small" @click="dialogTableVisible = false" class="normal-btn-width">取 消</el-button>
          <el-button size="small" type="primary" :disabled="selection.length === 0" @click="onSubmit" class="normal-btn-width">确 定</el-button>
        </div>
      </div>

    </el-drawer>-->
  </div>
</template>

<script>
import tablelayout from '@/components/table/index.vue'

export default {
  components:{
    tablelayout
  },
  data () {
    let that = this
    return {
      pickerOptions:{
        disabledDate(time){
          /*console.log(that.yearOpens,'已经开启的年份')*/
         /* return time.getFullYear() < new Date().getFullYear()*/
          /*const timestamp = time.getTime(); // 将待比较的日期转换成时间戳格式*/
          for (var i = 0;i<that.yearOpens.length;i++) {
            /*const disabledTimestamp = new Date(date).getTime(); // 将禁用日期转换成时间戳格式*/
            if (time.getFullYear() < new Date().getFullYear() || time.getFullYear() === that.yearOpens[i].year) {
              return true; // 禁用日期
            }
          }
          return false; // 可选日期
        }
      },
      yearOpens:[],
      dialogTableVisible:false,
      form:{
        "year": '',
        "sa_salestargetbillid": 0,//新建年度是为0，添加人员时为具体的数据id
        "sales":[]
      },
      tablecols:[],
      list:[],
      selection:[],
      condition:'',
      total:0,
      params: {
        "id": 20220901091302,
        "content": {
          "pageNumber":1,
          "pageSize":20,
            "sa_salestargetbillid": 1,
            "where": {
              "condition": ""
            }
        },
      }
    }
  },
  methods:{
    /*handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },*/
    /*async listData () {
      this.params.content.where.condition = this.condition
      const res = await this.$api.requested(this.params)
      this.total = res.total
      res.data.forEach(e => {
        e.marea = e.area.map(m=>{
          return `${m.province}${m.city}${m.county}`
        })
        e.marea = e.marea.join(',')
      });
      this.list = res.data
    },
    checkboxCallBack (val) {
      this.selection = val
    },*/
    async onSubmit () {
      /*if (this.form.year === '') return this.$message({
        message:'请选择年度',
        type:'error'
      })*/
      const res = await this.$api.requested({
        "id": 20220831165302,
        "content": {
          "year":this.form.year,
          "sa_salestargetbillid": 0,
          "sales": this.selection
        },
      })
      this.tool.showMessage(res,()=>{
        this.dialogTableVisible = false
        this.form = {
          "year": '',
          "sa_salestargetbillid": 0,//新建年度是为0，添加人员时为具体的数据id
          "sales":[]
        }
        this.yearData()
        this.$emit('onSuccess')
      })
    },
    onCancel(){
      this.form = {
        "year": '',
        "sa_salestargetbillid": 0,//新建年度是为0，添加人员时为具体的数据id
        "sales":[]
      }
      this.yearData()
      this.dialogTableVisible = false
    },
    /*获取默认年度*/
    yearData(){
      const nowDate = new Date()
      console.log(nowDate.getFullYear())
      this.form.year = String(nowDate.getFullYear() + 1)
    },
    /*已开启年度*/
    async yearList(){
      const res = await this.$api.requested({
        "id": 20230728090204,
        "content": {
          "type": 1,
          "targettype": "人员目标"
        },
      })
      this.yearOpens = res.data
    },
    /*pickerOptions(){
      // return time.getTime() < Date.now(); //当天不可选
      const time = new Date()
      return time.getFullYear() < new Date().getFullYear(); //  - 86400000是否包括当天
    }*/
  },
  mounted () {
    /*this.listData()*/
    this.yearData()
    this.yearList()
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name)['personalTable'].tablecols
  }
}

</script>
<style scoped>
  .el-pagination {
    text-align: right;
  }
  .panel_Target {
    border-top:1px solid #eeeeee;
    padding:5px 5px;
    margin-bottom:0px
  }
  >>> .el-dialog__body {
    padding: 0px 0px 10px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  >>> .el-dialog__header {
    padding: 10px 10px 10px ;

  }
  .dialog-footer{
    margin-top: 0px;
    margin-bottom: 10px;
  }
  >>> .el-dialog__title {
    line-height: 24px;
    font-size: 16px;
    color: #303133;
  }
</style>