vue-insagent-pc/src/views/Task/DaikeLetter.vue

<template>
  <div>
    <div class="flex f-c back">
      <el-form
        class="demo-ruleForm"
        :model="salespersonForm"
        label-width="100px"
        size="small"
        style="margin-top: 15px"
      >
        <el-row type="flex" justify="space-between">
          <el-col :span="5">
            <el-form-item label="工号">
              <el-input
                placeholder="请输入工号"
                v-model="salespersonForm.userId"
                maxlength="17"
                type="text"
                show-word-limit
              >
                <el-button
                  slot="append"
                  type="primary"
                  icon="el-icon-search"
                  @click="toChooseName()"
                  style="color: #fff;background-color:#D42426;border-color:#D42426;"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="业务员" prop="name">
              <el-input
                placeholder="请输入业务员"
                v-model="salespersonForm.name"
                type="text"
                show-word-limit
              >
                <el-button
                  slot="append"
                  type="primary"
                  icon="el-icon-search"
                  @click="toChooseName()"
                  style="color: #fff;background-color:#D42426;border-color:#D42426;"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="工号类型">
              <el-select v-model="salespersonForm.noType" disabled>
                <el-option label="业务员" value="A"></el-option>
                <el-option label="代理人" value="B"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="归属" >
              <el-input v-model="salespersonForm.deptName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="quotation-page">
      <el-tabs v-model="activeName"  tab-position="left" @tab-click="handleClick">
        <el-tab-pane label="报价" name="999" >
          <div class="quotation-content">
            <Ktletter ref="Ktletter" :isdisabled="isdisabled"  isLetter="2"></Ktletter>
          </div>
        </el-tab-pane>
        <el-tab-pane label="全部订单" name="888" :disabled="isdisabled">
          <div class="quotation-content">
            <KtOrder ref="KtOrder" @orderEdit="orderEdit"  :isLetterOrder="false"></KtOrder>
          </div>
        </el-tab-pane>
        <el-tab-pane v-for="(val) in orderOption"  :key='val.value' :label="val.lable" :name="val.value" :disabled="isdisabled">
          <div class="quotation-content">
            <KtOrder :ref="'refName' + val.value"  @orderEdit="orderEdit" :isLetterOrder="false"></KtOrder>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="业务员信息" :visible.sync="dialogVisible" >
      <el-form :inline="true" class="demo-form-inline" size="small"  label-width="80px" :model="salespersonForm" >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工号">
              <el-input v-model="salespersonForm.userId" placeholder="工号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务员">
              <el-input v-model="salespersonForm.name" placeholder="业务员" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="salespersonForm.mobile" placeholder="手机号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="身份证号">
              <el-input v-model="salespersonForm.identity" placeholder="身份证号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" size="small" @click="toChooseName()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        size="small"
        :data="salespersonData"
        height="690"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F7F7F9 ', fontWeight: '700', color: '#333333' }"
        highlight-current-row
        @row-dblclick="reslistCurrentChange"
      >
        <el-table-column prop="userId" label="工号" align="center" ></el-table-column>
        <el-table-column prop="name" label="	业务员名称" align="center" ></el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
        <el-table-column prop="identity" label="身份证号" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import Ktletter from "./daikeComponents/KtLetter.vue";
import KtOrder from "./daikeComponents/KtOrder.vue";
export default {
  name:'daike',
  components: { Ktletter,KtOrder },
  data(){
    return{
      // 业务员信息
      userOptions:[],//可选人员列表
      deptName:'',
      activeName:'999',
      dialogVisible:false,
      salespersonData:[],
      salespersonForm:{},
      isdisabled:true,
      orderOption:[
        {
          lable:'报价中',
          value:'0',
        },{
          lable:'待核保',
          value:'1',
        },{
          lable:'已核保待缴费',
          value:'2',
        },{
          lable:'已承保',
          value:'3',
        },{
          lable:'核保退回',
          value:'4',
        },
      ],
      message:'',
    }
  },
  created(){
    this.$message({
          showClose: true,
          message: '请先输入业务员,再进行操作!!!',
          type: 'warning',
          duration:10000
        });
  },
  methods:{
     //业务列表双击选中事件
     reslistCurrentChange(row, column, event) {
      this.salespersonForm = row; //名称
      this.activeName='999'
      this.$refs.Ktletter.add()
      this.$refs.Ktletter.userId=row.userId
      this.$refs.Ktletter.obtainProtocol()
      this.dialogVisible = false;
      this.isdisabled=false
    },
    toChooseName(){
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.$api.task.getAllUsersByHospitality({... this.salespersonForm}).then(res => {
        if (res.code == "200") {
          this.salespersonData = res.data;
          loading.close();
          this.dialogVisible = true;
        } else {
          loading.close();
          this.$message.error(res.msg);
        }
      });
    },
    handleClick(tab){
      if(tab.index==0){
        this.$refs.Ktletter.add()
      }
      if(tab.index==1){
        this.$refs.KtOrder.userIdPor=this.salespersonForm.userId
        this.$refs.KtOrder.deptIdPor=this.salespersonForm.deptId
        this.$refs.KtOrder.statusPor=tab.name
        this.$refs.KtOrder.findPage()
      }
      if(tab.index>1){
        let ref = eval('this.$refs.refName' + Number(tab.name))[0]
        ref.userIdPor=this.salespersonForm.userId
        ref.deptIdPor=this.salespersonForm.deptId
        ref.statusPor=tab.name
        ref.findPage()
      }
    },
    orderEdit(data){
      this.activeName=data.activeName
      this.$refs.Ktletter.editingWay(data)
      this.$refs.Ktletter.obtainProtocol(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.quotation-page{
  // border-radius: 6px;
  // border: 1px solid #ebeef5;
  // background-color: #fff;
}
.quotation-content{
  overflow-y: auto;
  height: 80vh;
}
</style>