iTDM-web/itdmWeb/src/views/module-iTDM/itdmTestPlan/itdmTestPlanList1.vue

{{ src/App.vue }}
<template>
  <div class="container" style="height:650px;">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="getHjlist">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="委托单位">
                <a-select
                v-model="tasks.queryParamNo.weituoClient"
                placeholder="请选择委托单位"
                show-search
                allowClear
                :options="weituoClientOptions"
                @change="getWeituoClientOptions">
                </a-select>
              </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="委托编号">
              <!-- <a-input placeholder="请输入委托编号" v-model="tasks.queryParam.weituoNo"></a-input> -->
                <a-select
                v-model="tasks.queryParam.weituoNo"
                placeholder="请选择委托编号"
                show-search
                allowClear
                :options="weituoNoOptions">
                </a-select>
              </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="getHjlist" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">提交</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <gantt ref="gantt" class="left-container" :tasks="tasks" style="height:600px;"></gantt>
  </div>
</template>

<script>
import Gantt from '../../../components/Gantt.vue';
import {getWeituoClientList, getWeituoInfoListByClient } from '@/api/api'
import { getAction } from '@api/manage'
import { gantt } from 'dhtmlx-gantt'

export default {
  name: 'app',
  components: {Gantt},
  data () {
    return {
      tasks: {
        // data: [
        // ],
        // collections: {
        //   staff:[],
        //   manager:[],
        //   chuanganqi:[],
        // },
        queryParam:{
          weituoNo: undefined
        },
        queryParamNo:{
          weituoClient: undefined
        },
      },
      // 委托单位列表
      weituoClientOptions : [],
      // 委托编号列表
      weituoNoOptions:[],
    }
  },
  created() {
    this.getClientList();
    // this.getHjlist();
    this.$nextTick(() => { this.getHjlist() })
  },

  methods: {
    // 获取委托单位下拉列表
    getClientList(){
      getWeituoClientList().then((res) =>{
        console.log(res)
        this.weituoClientOptions = res.result.map( res => {
          return{
            value: res,
            label: res
          }
        })
      })
    },
    // 监听委托单位获取
    getWeituoClientOptions(value){
      console.log(value);
      console.log(this.tasks.queryParamNo)
      this.weituoNoOptions = []
      this.tasks.queryParam.weituoNo = undefined
      getWeituoInfoListByClient(this.tasks.queryParamNo).then((res) =>{
        this.weituoNoOptions = res.result.map( res => {
          return{
            value: res.weituoNo,  //传的值
            label: res.weituoNo,  //展示
          }
        })
      })
    },
    getHjlist(){
      console.log(1111)
      let that = this
      var queryParam = that.tasks.queryParam
      queryParam.weituoClient = that.tasks.queryParamNo.weituoClient
      this.$refs.gantt.getinit( queryParam )

    },
    searchReset(){
      this.$refs.gantt.searchReset()
    }
  }
}
</script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* overflow:hidden; */
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
</style>