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

<template>
  <div>
    <el-button type="text" class="inline" style="font-size: 12px;" @click="onShow">人员编辑</el-button>
    <el-drawer
        title="人员编辑"
        :visible.sync="dialogTableVisible"
        size="80%"
        direction="rtl"
        append-to-body
        @close="onCancel"
        :show-close="false"
    >
      <div class="panel_Target">
        <el-row>
          <el-col :span="11">
            <div style="margin-top: 2%;margin-bottom: 2%">
              <el-input
                  placeholder="请输入姓名"
                  suffix-icon="el-icon-search"
                  v-model="leftData.param.content.where.condition"
                  @input="listDataLeft(leftData.param.content.pageNumber = 1)"
                  @keyup.native.enter="listDataLeft(leftData.param.content.pageNumber = 1)"
                  @clear="listDataLeft(leftData.param.content.pageNumber = 1)"
                  style="width:60%"
                  size="small"
                  class="input-with-select inline-16" clearable>
              </el-input>
            </div>
          </el-col>
          <el-col :span="11" :offset="2">
            <div style="margin-top: 2%;margin-bottom: 2%">
              <el-input
                  placeholder="请输入姓名"
                  suffix-icon="el-icon-search"
                  v-model="rightData.param.content.where.condition"
                  @input="listDataRight(rightData.param.content.pageNumber = 1)"
                  @keyup.native.enter="listDataRight(rightData.param.content.pageNumber = 1)"
                  @clear="listDataRight(rightData.param.content.pageNumber = 1)"
                  style="width:60%"
                  size="small"
                  class="input-with-select inline-16" clearable>
              </el-input>
            </div>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <div>
              <tablelayout class="normal-margin inline" :layout="tablecols" :data="leftData.list" :custom="true" :checkbox="true" height="calc(100vh - 252px)" @checkboxCallBack="checkboxCallBackLeft">
                <template v-slot:customcol="scope">
                  <p>{{scope.column.data[scope.column.columnname]}}</p>
                </template>
              </tablelayout>
              <div class="flex-align-center container normal-panel" style="float: left;">
                <p style="float: left">已选{{leftData.selection.length}}人</p>&nbsp;
                <p style="float: right">总共{{leftData.list.length}}人</p>

              </div>
<!--              <div  class="container normal-panel"  style="float: right;">
                <el-pagination
                    background
                    small
                    @size-change="handleSizeChangeLeft"
                    @current-change="handleCurrentChangeLeft"
                    :current-page="leftData.currentPage"
                    :page-sizes="[20, 50, 100, 200]"
                    layout="total,sizes, prev, pager, next, jumper"
                    :total="leftData.total">
                </el-pagination>
              </div>-->
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              <el-button  type="primary" size="small" style="margin-left: 22%;margin-top: 70%" @click="addPersonal">添加<i class="el-icon-d-arrow-right"></i></el-button>
              <el-button icon="el-icon-d-arrow-left" type="primary" size="small" style="margin-left: 22%;margin-top: 30%" @click="delPersonal">移除</el-button>
            </div>

          </el-col>
          <el-col :span="11">
            <div>
              <tablelayout class="normal-margin inline" :layout="tablecols" :data="rightData.list" :custom="true" :checkbox="true" height="calc(100vh - 252px)" @checkboxCallBack="checkboxCallBackRight">
                <template v-slot:customcol="scope">
                  <p>{{scope.column.data[scope.column.columnname]}}</p>
                </template>
              </tablelayout>
              <div class="flex-align-center container normal-panel" style="float: left;">
                <p style="float: left">已选{{rightData.selection.length}}人</p>&nbsp;
                <p style="float: right">总共{{rightData.list.length}}人</p>

              </div>
<!--              <div  class="container normal-panel"  style="float: right;">
                <el-pagination
                    background
                    small
                    @size-change="handleSizeChangeRight"
                    @current-change="handleCurrentChangeRight"
                    :current-page="rightData.currentPage"
                    :page-sizes="[20, 50, 100, 200]"
                    layout="total,sizes, prev, pager, next, jumper"
                    :total="rightData.total">
                </el-pagination>
              </div>-->
            </div>

          </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>-->
      <div class="fixed__btn__panel">
        <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-drawer>
  </div>
</template>

<script>
import tablelayout from '@/components/table/index.vue'
export default {
  props:["data"],
  name: "addPersonal",
  components:{
    tablelayout
  },
  data(){
    return {
      dialogTableVisible:false,
      form:'',
      tablecols:[],
      list:[],
      selection:[],
      condition:'',

      leftData:{
        list:[],
        total:0,
        currentPage:0,
        condition:'',
        selection:[],
        param: {
          "id": 20220901091302,
          "content": {
            "pageNumber":1,
            "pageSize":20,
            "sa_salestargetbillid": 0,
            "type":'',
            "where": {
              "condition": ""
            }
          },
        },
      },
      rightData:{
        list:[],
        total:0,
        currentPage:0,
        condition:'',
        selection:[],
        hrid:[],
        param: {
          "id": 20220901091302,
          "content": {
            "pageNumber":1,
            "pageSize":20,
            "sa_salestargetbillid": 0,
            "type":1,
            "where": {
              "condition": ""
            }
          },
        },
      }
    }
  },
  methods:{
    onShow(){
      console.log(this.data)
      this.dialogTableVisible = true
      this.listDataLeft()
      this.listDataRight()
    },
    async listDataLeft(){
     /* this.leftData.param.content.where.condition = this.leftData.condition*/
      this.leftData.param.content.sa_salestargetbillid = this.data.sa_salestargetbillid
      const res = await this.$api.requested(this.leftData.param)
      /*res.data.forEach(e => {
        e.marea = e.area.map(m=>{
          return `${m.province}${m.city}${m.county}`
        })
        e.marea = e.marea.join(',')
      })*/
      this.leftData.list = res.data
      this.leftData.total = res.total
      this.leftData.currentPage = res.pageNumber
    },
    async listDataRight(){
      /* this.leftData.param.content.where.condition = this.leftData.condition*/
      this.rightData.param.content.sa_salestargetbillid = this.data.sa_salestargetbillid
      const res = await this.$api.requested(this.rightData.param)
      /*res.data.forEach(e => {
        e.marea = e.area.map(m=>{
          return `${m.province}${m.city}${m.county}`
        })
        e.marea = e.marea.join(',')
      })*/
      this.rightData.list = res.data
      this.rightData.total = res.total
      this.rightData.currentPage = res.pageNumber
    },
    onCancel(){
      this.dialogTableVisible = false
      this.leftData.param.condition = ''
      this.rightData.param.condition = ''
      this.listDataRight()
      this.listDataLeft()
      this.$emit("onSuccess")
    },
    async onSubmit(){
      this.dialogTableVisible = false
      this.$emit("onSuccess")
      /*console.log("执行")

      const res = await this.$api.requested({
        "id": 20220831165302,
        "content": {
          "year": this.data.year,
          "sa_salestargetbillid": this.data.sa_salestargetbillid,//新建年度是为0，添加人员时为具体的数据id
          "sales": this.selection
        },
      })
      this.tool.showMessage(res,()=>{
        this.dialogTableVisible = false
        this.$emit('onSuccess')
      })*/
    },
    async addPersonal(){
      console.log(this.leftData.selection)
      const res = await this.$api.requested({
        "id": 20220831165302,
        "content": {
          "year": this.data.year,
          "sa_salestargetbillid": this.data.sa_salestargetbillid,//新建年度是为0，添加人员时为具体的数据id
          "sales": this.leftData.selection
        },
      })
      this.tool.showMessage(res,()=>{
        this.listDataLeft()
        this.listDataRight()
        this.$emit("onSuccess")
      })
    },
    async delPersonal(){
      const res = await this.$api.requested({
        "id": 20220901111202,
        "content": {
          "sa_salestargetbillid": this.data.sa_salestargetbillid,
          "hrid": this.rightData.hrid
        },
      })
      this.tool.showMessage(res,()=>{
        this.listDataLeft()
        this.listDataRight()
        this.$emit("onSuccess")
      })
    },
    checkboxCallBackLeft (val) {
      this.leftData.selection = val
      console.log(this.leftData.selection)
    },
    checkboxCallBackRight (val) {
      this.rightData.selection = val
      console.log(this.rightData.selection)
      this.rightData.selection.forEach((item,index) => {
        this.rightData.hrid[index] = item.hrid
        console.log(this.rightData.hrid,'-----------------------------------')
      })
    },
    handleSizeChangeLeft(val){
      // console.log(`每页 ${val} 条`);
      this.leftData.param.content.pageSize = val
      this.listDataLeft()
    },
    handleCurrentChangeLeft(val){
      // console.log(`当前页: ${val}`);
      this.leftData.param.content.pageNumber = val
      this.listDataLeft()
    },
    handleSizeChangeRight(val){
      // console.log(`每页 ${val} 条`);
      this.rightData.param.content.pageSize = val
      this.listDataRight()
    },
    handleCurrentChangeRight(val){
      // console.log(`当前页: ${val}`);
      this.rightData.param.content.pageNumber = val
      this.listDataRight()
    }
  },
  mounted() {
    /*this.listDataLeft()
    this.listDataRight()*/
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name)['personalTable'].tablecols
  }
}
</script>

<style scoped>
.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>