yos_web/src/HManagement/task/components/applicationDataCopy.vue

<template>
  <div>
    <el-dialog title="选择应用数据" :visible.sync="dialogTableVisible" append-to-body width="70%">
      <el-divider></el-divider>
      <div style="display: flex;justify-content: space-between;padding: 16px">
        <div>
          <span style="color:red">*</span>
          <span class="search__label">选择应用:</span>
          <el-select v-model="value" placeholder="请选择" size="small" @change="onChange">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <span class="search__label">搜索:</span>
          <el-input v-model="input" placeholder="请输入搜索内容" style="width: 300px" size="small" @keyup.native.enter="searchData" @clear="searchData" clearable></el-input>
        </div>
      </div>
      <div style="padding: 0px 16px 16px 16px">
        <!--     销售线索配置       -->
        <table-new-layout v-if="value === 'sat_orderclue'" :layout="tablecols" :checkbox="false"  :data="list" :opwidth="200" height="calc(100vh - 550px)" :width="true" :custom="true" fixedName="operation">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname == 'status'">
              <span style="color:#999999" v-if="scope.column.data[[scope.column.columnname]] == '已过期'">{{scope.column.data[[scope.column.columnname]]}}</span>
              <span style="color:#52c41a" v-else-if="scope.column.data[[scope.column.columnname]] == '跟进中'">{{scope.column.data[[scope.column.columnname]]}}</span>
              <span style="color:#3874f6" v-else-if="scope.column.data[[scope.column.columnname]] == '待跟进'">{{scope.column.data[[scope.column.columnname]]}}</span>
              <span style="color:#333333" v-else-if="scope.column.data[[scope.column.columnname]] == '已无效'">{{scope.column.data[[scope.column.columnname]]}}</span>
              <span style="color:#fa8c16" v-else-if="scope.column.data[[scope.column.columnname]] == '已转化'">{{scope.column.data[[scope.column.columnname]]}}</span>
              <span v-else>{{scope.column.data[[scope.column.columnname]]}}</span>
            </div>
            <div v-else-if="scope.column.columnname == 'totalinvestment'">
              <span>{{scope.column.data[[scope.column.columnname]] !== 0?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
            </div>
            <div v-else-if="scope.column.columnname === 'tag'">
              <div v-if="scope.column.data.sys_tag">
                <div v-for="item in scope.column.data.sys_tag" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
                  <el-tag  color="#3874F6" size="mini" type="primary" effect="dark">
                    <span>{{item}}</span>
                  </el-tag>
                </div>
                <div v-for="item in scope.column.data.tag" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
                  <el-tag color="#FA8C16" size="mini" type="warning" effect="dark">
                    <span>{{item}}</span>
                  </el-tag>
                </div>
              </div>
              <div v-else>--</div>
            </div>
            <div v-else-if="scope.column.columnname == 'scale'">
              <span>{{scope.column.data[[scope.column.columnname]] !== '' &&  scope.column.data[[scope.column.columnname]] !== 0?scope.column.data[[scope.column.columnname]]+scope.column.data.unitname:'--'}}</span>
            </div>
            <div v-else-if="scope.column.columnname == 'costofconstruction'">
              <span>{{scope.column.data[[scope.column.columnname]] !== 0?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
            </div>
            <div v-else-if="scope.column.columnname == 'leader'">
              <span v-if="scope.column.data[[scope.column.columnname]].length !== 0">{{scope.column.data[[scope.column.columnname]].length > 0 && scope.column.data[[scope.column.columnname]][0].name}}</span>
              <span v-else>--</span>
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:scope.column.columnname == 'operation'?'':'--'}}</p>
          </template>
          <template v-slot:opreation="scope">
            <el-button type="text" @click="onSelect(scope.data)">选择</el-button>
          </template>
        </table-new-layout>
        <!--     我的客户配置       -->
        <table-new-layout v-else-if="value === 'sa_customers'" :layout="tablecols" :checkbox="false"  :data="list" :opwidth="200" height="calc(100vh - 550px)" :width="true" :custom="true" fixedName="operation">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'isleader'">
              <span v-if="scope.column.data['leader'].length !== 0">已分配</span>
              <span v-else>未分配</span>
            </div>
            <div v-else-if="scope.column.columnname === 'tag'">
              <div v-for="item in scope.column.data.tag_sys" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
                <el-tag  color="#3874F6" size="mini" type="primary" effect="dark">
                  <span>{{item}}</span>
                </el-tag>
              </div>
              <div v-for="item in scope.column.data.tag" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
                <el-tag color="#FA8C16" size="mini" type="warning" effect="dark">
                  <span>{{item}}</span>
                </el-tag>
              </div>
            </div>
            <div v-else-if="scope.column.columnname === 'industry'">
              <span v-if="JSON.stringify(scope.column.data.industry) !== '[]' && scope.column.data.industry">
                <div v-for="item in scope.column.data.industry" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
                  <el-tag size="mini"  effect="dark">
                    <span>{{item}}</span>
                  </el-tag>
                </div>
              </span>
              <div v-else>
                {{'--'}}
              </div>
            </div>
            <div v-else-if="scope.column.columnname === 'tradingstatus'">
              <span style="color:#3874f6" v-if="scope.column.data[[scope.column.columnname]] == '未成交'">{{scope.column.data[[scope.column.columnname]]}}</span>
              <span style="color:#fa8c16" v-else-if="scope.column.data[[scope.column.columnname]] == '已成交'">{{scope.column.data[[scope.column.columnname]]}}</span>
              <span style="color:#333333" v-else-if="scope.column.data[[scope.column.columnname]] == '多次成交'">{{scope.column.data[[scope.column.columnname]]}}</span>
            </div>
            <div v-else-if="scope.column.columnname === 'status'">
              <span style="color:#3874f6" v-if="scope.column.data[[scope.column.columnname]] == '潜在'">{{scope.column.data[[scope.column.columnname]]}}</span>
              <span style="color:#52c41a" v-else-if="scope.column.data[[scope.column.columnname]] == '合作中'">{{scope.column.data[[scope.column.columnname]]}}</span>
              <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '已终止'">{{scope.column.data[[scope.column.columnname]]}}</span>
            </div>
            <div v-else-if="scope.column.columnname === 'leader'">
              <span>{{scope.column.data['leader'][0]?scope.column.data['leader'][0].name:'--'}}</span>
            </div>
            <div v-else-if="scope.column.columnname === 'depname'">
              <span>{{scope.column.data['leader'][0]?scope.column.data['leader'][0].depname?scope.column.data['leader'][0].depname:'--':'--'}}</span>
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:scope.column.columnname == 'operation'?'':'--'}}</p>
          </template>
          <template v-slot:opreation="scope">
            <el-button type="text" @click="onSelect(scope.data)">选择</el-button>
          </template>
        </table-new-layout>
        <!--     项目商机配置       -->
        <table-new-layout v-else-if="value === 'sa_project'" :layout="tablecols" :checkbox="false"  :data="list" :opwidth="200" height="calc(100vh - 550px)" :width="true" :custom="true" fixedName="operation">
          <template v-slot:customcol="scope">
              <div v-if="scope.column.columnname === 'status'">
                <span style="color:#52c41a" v-if="scope.column.data[[scope.column.columnname]] == '跟进中'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#fa8c16" v-else-if="scope.column.data[[scope.column.columnname]] == '已成交'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '已失败'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '已结案'">{{scope.column.data[[scope.column.columnname]]}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'reportstatus'">
                <span style="color:#3874f6" v-if="scope.column.data[[scope.column.columnname]] == '已报备'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#52c41a" v-else-if="scope.column.data[[scope.column.columnname]] == '报备中'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '未报备'">{{scope.column.data[[scope.column.columnname]]}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'tag_sys'">
                <div v-for="item in scope.column.data.tag_sys" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
                  <el-tag  color="#3874F6" size="mini" type="primary" effect="dark">
                    <span>{{item}}</span>
                  </el-tag>
                </div>
                <div v-for="item in scope.column.data.tag" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
                  <el-tag color="#FA8C16" size="mini" type="warning" effect="dark">
                    <span>{{item}}</span>
                  </el-tag>
                </div>
              </div>
              <div v-else-if="scope.column.columnname === 'leader'">
                {{scope.column.data.leader[0] && scope.column.data.leader[0].name}}
              </div>
              <div v-else-if="scope.column.columnname === 'projecttype'">
                {{scope.column.data.projecttype + '-' + scope.column.data.projecttype_remarks}}
              </div>
              <div v-else-if="scope.column.columnname == 'totalinvestment'">
                <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname == 'costofconstruction'">
                <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname == 'budgetary'">
                <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname == 'signamount_due'">
                <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname == 'begdate_due'">
                <span>{{scope.column.data[[scope.column.columnname]] ? scope.column.data[[scope.column.columnname]] !== 'NaN-NaN'?scope.column.data[[scope.column.columnname]]:'--' :'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname == 'enddate_due'">
                <span>{{scope.column.data[[scope.column.columnname]] ? scope.column.data[[scope.column.columnname]] !== 'NaN-NaN'?scope.column.data[[scope.column.columnname]]:'--' :'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname == 'scale'">
                <span>{{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]] + scope.column.data.unitname:'--'}}</span>
              </div>
              <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:scope.column.columnname == 'operation'?'':'--'}}</p>
          </template>
          <template v-slot:opreation="scope">
            <el-button type="text" @click="onSelect(scope.data)">选择</el-button>
          </template>
        </table-new-layout>
        <div class="container normal-panel" style="text-align:right;padding-bottom: 0">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="20"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "applicationData",
  data() {
    return {
      dialogTableVisible:false,
      options: [{
        value: 'sat_orderclue',
        label: '销售线索'
      }, {
        value: 'sa_customers',
        label: '我的客户'
      }, {
        value: 'sa_project',
        label: '项目商机'
      }],
      value: 'sat_orderclue',
      input:"",
      tablecols:[],
      list:[],
      total:0,
      currentPage:0,
      /*销售线索*/
      clueParam:{
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          },
          "type": 1,
          "isAll":0
        },
        "id": 20221101094502,
      },
      /*我的客户*/
      customerParam:{
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          },
          "type": 1,
          "deleted": 0,
          "isend": 0,
          "isExport":0
        },
        "id": 20221012164402,
      },
      /*项目商机*/
      projectParam:{
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          },
          "type": 1,
          "deleted": 0
        },
        "id": 20221020143502,
      }
    }
  },
  methods:{
    async listData(){
      if (this.value === 'sat_orderclue'){
        const res = await this.$api.requested(this.clueParam)
        this.list = res.data
        this.total = res.total
        this.currentPage = res.pageNumber
      }else if (this.value === 'sa_customers'){
        const res = await this.$api.requested(this.customerParam)
        this.list = res.data
        this.total = res.total
        this.currentPage = res.pageNumber
      }else if (this.value === 'sa_project'){
        const res = await this.$api.requested(this.projectParam)
        this.list = res.data
        this.total = res.total
        this.currentPage = res.pageNumber
      }

    },
    /*选择应用*/
    onChange(){
      if (this.value === 'sat_orderclue'){
        this.tablecols = this.tool.tabelCol(this.$route.name).orderclueList.tablecols
      }else if (this.value === 'sa_customers'){
        this.tablecols = this.tool.tabelCol(this.$route.name).myCustomerTable.tablecols
      }else if (this.value === 'sa_project'){
        this.tablecols = this.tool.tabelCol(this.$route.name).projectTable.tablecols
      }
      this.listData()
    },
    /*选择应用中的数据*/
    onSelect(data){
      console.log(data)
      if (this.value === 'sat_orderclue'){
        this.$emit('selectApplication',data.sat_orderclueid,this.value)
      }else if (this.value === 'sa_customers'){
        this.$emit('selectApplication',data.sa_customersid,this.value)
      }else if (this.value === 'sa_project'){
        this.$emit('selectApplication',data.sa_projectid,this.value)
      }
      this.dialogTableVisible = false
    },
    searchData(){
      if (this.value === 'sat_orderclue'){
        this.clueParam.content.where.condition = this.input
        this.clueParam.content.pageNumber = 1
      }else if (this.value === 'sa_customers'){
        this.customerParam.content.where.condition = this.input
        this.customerParam.content.pageNumber = 1
      }else if (this.value === 'sa_project'){
        this.projectParam.content.where.condition = this.input
        this.projectParam.content.pageNumber = 1
      }
      this.listData()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      if (this.value === 'sat_orderclue'){
        this.clueParam.content.pageSize = val
      }else if (this.value === 'sa_customers'){
        this.customerParam.content.pageSize = val
      }else if (this.value === 'sa_project'){
        this.projectParam.content.pageSize = val
      }
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      if (this.value === 'sat_orderclue'){
        this.clueParam.content.pageNumber = val
      }else if (this.value === 'sa_customers'){
        this.customerParam.content.pageNumber = val
      }else if (this.value === 'sa_project'){
        this.projectParam.content.pageNumber = val
      }
      this.listData()
    },
  },
  mounted() {
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).orderclueList.tablecols
  }
}
</script>

<style scoped>
  /deep/ .el-dialog__body {
    padding: 0px !important;
  }
  /deep/ .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 0;
  }
</style>