yos_web/src/HDrpManagement/projectChange/index.vue

<template>
  <div>
    <basicLayout 
      style="padding-top:0 !important"
      ref="basicLayout" 
      formPath="projectChange" 
      tableName="projectTable" 
      idName="sa_projectid" 
      :apiId="{query:20221020143502,del:''}"
      :options="options"
      :detailPath="{path:'/projectChangeDetail',param:{tabIndex:tabIndex}}">
      <template #titleRight>
<!--        <el-divider direction="vertical"></el-divider>
        <el-dropdown size="medium" @command="handleCommand">
          <span class="el-dropdown-link">
            {{tabName}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in editableTabs" :key="index" :command="item">{{item.title}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>-->
      </template>
      <template #custom >
        <div class="mt-10">
          <label  class="search__label" >数据分类:</label>
          <el-select class="inline-24" v-model="tabName" placeholder="请选择数据分类" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :value="item.name">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">项目类型:</label>
          <el-select class="inline-24" v-model="selectParam.projecttype" placeholder="请选择项目类型" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in projectType"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">项目等级:</label>
          <el-select class="inline-24" v-model="selectParam.grade" placeholder="请选择项目等级" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in projectLead"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">当前项目阶段:</label>
          <el-select class="inline-24" v-model="selectParam.stagename" placeholder="请选择项目阶段" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in option.stageList"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">项目状态:</label>
          <el-select class="inline-24" v-model="selectParam.status" placeholder="请选择项目状态" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in option.statusTab"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label" >创建日期:</label>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              @change="selectChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable>
          </el-date-picker>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname === 'status'">
          <span style="color:#52c41a" v-if="scope.data.column.data[[scope.data.column.columnname]] == '跟进中'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#fa8c16" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '已成交'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#999999" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '已失败'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  name: "index",
  provide () {
    return {
      enterpriseList:() => this.enterpriseList,
      projectType:() => this.projectType,
      projectLead:() => this.projectLead,
      projectPanl:() => this.projectPanl
    }
  },
  data() {
    return {
      editableTabsValue:"我负责的",
      /* 企业列表 */
      enterpriseList:'',
      /* 企业列表 */
      projectType:'',
      projectLead:'',
      projectPanl:'',
      statusValue:"全部",
      dateSelect:'',
      options:[],
      option:{
        statusTab:[
          {
            value:"跟进中",
            label:"跟进中"
          },
          {
            value:"已成交",
            label:"已成交"
          },
          {
            value:"已失败",
            label:"已失败"
          }
        ],
        stageList:[
          {
            value:"阶段一",
            label:"阶段一"
          },
          {
            value:"阶段二",
            label:"阶段二"
          },
          {
            value:"阶段三",
            label:"阶段三"
          },
          {
            value:"阶段四",
            label:"阶段四"
          },
          {
            value:"阶段五",
            label:"阶段五"
          }
        ]
      },
      tabName:"1",
      tabIndex:"1",
      editableTabs: [ {
        title: '我负责的',
        name: "1",
      }, {
        title: '我参与的',
        name: "2",
      }, {
        title: '我下属负责的',
        name: "3",
      }, {
        title: '我下属参与的',
        name: "4",
      }],
      selectParam: {
        status:'',
        projecttype:'',
        grade:'',
        startdate:'',
        enddate:'',
        stagename:''
      },
    }
  },
  created () {
    /*this.getProjectPanl()*/
    this.getEnterprise()
    this.getSysetms()
  },
  methods: {
    /* 获取联系人:负责人列表 */
    async getAccount () {
      let res = await this.$api.requested({
        "id": "20221018150602",
        "content": {
            "sys_enterpriseid": 1,
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
                "condition": ""
            }
        }
      })
    },
    async getSysetms () {
      /* 获取项目类型 */
      let res = await this.$store.dispatch('optiontypeselect','projecttype')
      this.projectType = res.data
      /* 获取项目等级 */
      let res2 = await this.$store.dispatch('optiontypeselect','projectgrade')
      this.projectLead = res2.data
      console.log(this.projectLead);
      
    },
    /** 获取公司数据 */
    async getEnterprise () {
      let res = await this.$api.requested({
        "id": 20221021095802,
        "content": {
            "pageNumber": 1,
            "pageSize": 99999,
            "where": {
                "condition": ""
            }
        },
      })
      this.enterpriseList = res.data
    },
    /* 获取项目模板 */
    /*async getProjectPanl () {
      let res = await this.$api.requested({
        "id": "20221019085604",
        "content": {
            "pageNumber": 1,
            "pageSize": 99999999,
            "where":{
                "condition":""
            }
        }
      })
      this.projectPanl = res.data
    },*/
    handleCommand(command){
      console.log("输出command")
      console.log(command)
      this.tabName = command.title
      this.tabIndex = command.name
      this.queryData(command.name)
    },
    queryData(id){
      console.log("执行")
      this.$refs['basicLayout'].param.content.type = id
      this.$refs['basicLayout'].param.content.isExport = false
      this.$refs['basicLayout'].listData()
    },
    selectChange () {
      console.log(this.projectType)
      console.log(this.projectLead)
      this.tabIndex = this.tabName
      if (this.dateSelect !== '' && this.dateSelect !== null){
        this.selectParam.startdate = this.dateSelect[0]
        this.selectParam.enddate = this.dateSelect[1]
      }else {
        this.selectParam.startdate = ''
        this.selectParam.enddate = ''
      }
      this.$refs.basicLayout.param.content.type = this.tabIndex
      this.$refs.basicLayout.param.content.where = this.selectParam
      this.$refs.basicLayout.listData()
    },
    /*onChangeTab(val){
      console.log(val)
      this.tabIndex = val
      this.queryData(val)
    },
    clearTime () {
      this.$refs['basicLayout'].param.content.where.startdate = ''
      this.$refs['basicLayout'].param.content.where.enddate = ''
      this.$refs['basicLayout'].listData()
    },
    timeChange (time) {
      this.$refs['basicLayout'].param.content.where.startdate = time[0]
      this.$refs['basicLayout'].param.content.where.enddate = time[1]
      this.$refs['basicLayout'].listData()
    }*/
  },
  mounted () {
    this.queryData(1)
  }
}
</script>

<style scoped>
</style>