UNION_NSI/target/classes/static/components/proposal/ProposalSearch.vue

<template>
  <el-card shadow="never" style="position:relative;">
    <div class="d-search-item btn-group tool-button">
      <el-input placeholder="请输入内容" clearable v-model="page.searchKeyword"
                @keyup.enter.native="$emit('doSearch')">
        <el-select v-model="page.searchName" slot="prepend" placeholder="查询类型"
                   style="width: 110px;">
          <el-option label="提案名称" value="proposalName"></el-option>
          <el-option label="提案编号" value="proposalCode"></el-option>
        </el-select>
      </el-input>
    </div>
    <div class="d-search-item btn-group tool-button">
      <el-input placeholder="请输入提案人的姓名或工号" clearable v-model="page.createUser"
                @keyup.enter.native="$emit('doSearch')">
      </el-input>
    </div>
    <div class="d-search-item btn-group tool-button">
      <el-select v-model="page.meetingId" filterable clearable @change="meetingChange" placeholder="根据教代会查询">
        <el-option
            v-for="item in allJdhOptions"
            :label="item.jdhallname"
            :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="d-search-item btn-group tool-button">
      <el-select v-model="page.delegationId" filterable clearable placeholder="所属代表团" @change="delegationChange">
        <el-option v-for="item in delegationOptions" :key="item.id" :label="item.dbtname"
                   :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="mt10">
      <div class="d-search-item btn-group tool-button">
        <el-select clearable v-model="page.unionId" filterable placeholder="请选择工会" @change="unionChange">
          <el-option
              v-for="item in unionOptions"
              :key="item.id"
              :label="item.unionname"
              :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="d-search-item btn-group tool-button">
        <el-select clearable v-model="page.unitId" filterable placeholder="请选择单位">
          <el-option
              v-for="item in unitOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="d-search-item btn-group tool-button" v-if="has_seconded">
        <el-select clearable v-model="page.resultCode" filterable placeholder="请选择立案结果">
          <el-option
              v-for="item in resultOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code">
          </el-option>
        </el-select>
      </div>
      <div class="btn-group tool-button" style="margin-left: 10px">
        <el-button type="primary" icon="el-icon-search" @click="$emit('search')"></el-button>
      </div>
    </div>


    <div style="position: absolute;right: 20px;top: 20px;">


      <template v-if="has_add">
        <el-button class="ml5" icon="el-icon-upload2" plain type="primary"
                   @click="$emit('import')">导入提案
        </el-button>
      </template>

      <template v-if="has_add">
        <el-button type="primary" icon="el-icon-plus" @click="$emit('add')">新建提案</el-button>
      </template>

      <template v-if="audit">
        <el-radio-group v-model="page.isAudit" @change="$emit('search')">
          <el-radio-button :label="null">全部</el-radio-button>
          <el-radio-button :label="true">已{{ title }}</el-radio-button>
          <el-radio-button :label="false">未{{ title }}</el-radio-button>
        </el-radio-group>
      </template>

      <slot name="column"></slot>
    </div>
  </el-card>
</template>

<script>
module.exports = {
  props: {
    page: {
      type: Object,
      default: {}
    },
    has_add: {
      type: Boolean,
      default: false
    },
    has_seconded: {
      type: Boolean,
      default: true
    },
    audit: {
      type: String,
      default: true
    },
    title: {
      type: String,
      default: '审核'
    },
  },
  data() {
    return {
      allJdhOptions: [],
      delegationOptions: [],
      unionOptions: [],
      unitOptions: [],
      resultOptions: []
    }
  },
  methods: {
    async meetingChange(val) {
      this.page.delegationId = null
      this.delegationOptions = await proposal.getDelegation(val)
    },
    async delegationChange(val) {
      this.unionOptions = await getUnions(val)
    },
    async unionChange(val) {
      this.unitOptions = await getUnits(val)
    }
  },
  async mounted() {
    this.resultOptions = await getDictByCode("proposal_result")
    this.allJdhOptions = await proposal.getOpenMeeting()
    this.page.meetingId = this.allJdhOptions.length > 0 ? this.allJdhOptions[0].id : null
    this.delegationOptions = await proposal.getDelegation(this.page.meetingId)
    this.unionOptions = await getUnions(null)
    this.unitOptions = await getUnits(null)
    this.$emit('finished', null)
  },
  async created() {
    // this.resultOptions = await getDictByCode("proposal_result")
    // this.allJdhOptions = await proposal.getOpenMeeting()
    // this.page.meetingId = this.allJdhOptions.length > 0 ? this.allJdhOptions[0].id : null
    // this.delegationOptions = await proposal.getDelegation(this.page.meetingId)
    // this.unionOptions = await getUnions(null)
    // this.unitOptions = await getUnits(null)
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}

.navbar {
  line-height: 3;
}

.btn-group {
  width: 20%;
}

.d-search-item {
  margin-right: 10px;
}

.search-op {
  position: absolute;
  top: 0;
  right: 10px;
}
</style>