search.vue 9.28 KB
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:24px">检索条件</span>
      </div>
      <el-form id="form" :inline="true" :model="search_form" class="demo-form-inline" label-width="100px" ref="search_form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="销售员" prop="salesperson_unid">
              <el-select v-model="search_form.salesperson_unid" filterable remote placeholder="销售人员" :remote-method="salespersonIdRemoteMethod">
                <el-option v-for="(item,index) in salesperson_unid_selected_data" :key="index" :label="item.name" :value="item.code_unid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称" prop="project_unid">
              <el-select v-model="search_form.project_unid" filterable remote placeholder="项目名称" :remote-method="projectIdRemoteMethod">
                <el-option v-for="(item,index) in project_unid_selected_data" :key="index" :label="item.name" :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="customer_unid">
              <el-select v-model="search_form.customer_unid" filterable remote placeholder="客户名称" :remote-method="customerIdRemoteMethod">
                <el-option v-for="(item,index) in customer_unid_selected_data" :key="index" :label="item.name" :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="质保周期(月)" prop="guarantee_period">
              <el-input-number v-model="search_form.guarantee_period" :step="6" :min="6" :max="60" size="medium"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属年份" prop="year">
              <el-select v-model="search_form.year">
                <el-option v-for="n in year_list" :key="n" :label="n" :value="n">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属月份" prop="month">
              <el-select v-model="search_form.month">
                <el-option v-for="n in 12" :key="n" :label="n" :value="n">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同状态" prop="contract_state">
              <el-select v-model="search_form.contract_state">
                <el-option v-for="(value,index) in contract_state_data" :key="index" :label="value" :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同性质" prop="contract_type">
              <el-select v-model="search_form.contract_type">
                <el-option v-for="(value,index) in contract_type_data" :key="index" :label="value" :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="产品线类型" prop="product_line_type">
              <el-select v-model="search_form.product_line_type">
                <el-option v-for="(value,index) in product_line_type_data" :key="index" :label="value" :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否终验" prop="acceptance_type">
              <el-select v-model="search_form.acceptance_type">
                <el-option label="是" :value="1">
                </el-option>
                <el-option label="否" :value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否归档" prop="is_archive">
              <el-select v-model="search_form.is_archive">
                <el-option label="是" value=true></el-option>
                <el-option label="否" value=false></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账款状态" prop="amount_state_unid">
              <el-select v-model="search_form.amount_state_unid">
                <el-option v-for="(value,index) in amount_state_unid_data" :key="index" :label="value" :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="确认收入金额" prop="confirm_income_amount">
              <el-input v-model="search_form.confirm_income_amount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-button-group style="float:right">
          <el-button type="primary" @click="commit()" size="small">检索</el-button>
          <el-button type="primary" @click="reset()" size="small">重置</el-button>
        </el-button-group>
      </el-row>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:24px">检索结果</span>
      </div>

      <el-row>
        <el-col :span="20">
          <el-pagination style="float:left" background layout="prev, pager, next" :total="total_data" :page-size="10" prev-text="上一页" next-text="下一页" :current-page="current_page" @current-change="current_change">
          </el-pagination>
        </el-col>

        <el-col :span="4">
          <el-button-group style="float:right">
            <el-button type="primary" size="small">导出</el-button>
            <el-button type="primary" size="small">导入</el-button>
          </el-button-group>
        </el-col>

      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code_base_url: disparch_data.code_base_url,
      contract_base_url: disparch_data.contract_base_url,
      project_unid_selected_data: [], //项目名称数据数组
      customer_unid_selected_data: [], //客户名称数据数组
      salesperson_unid_selected_data: [],
      contract_state_data: ["已完成", "代发货", "施工中", "项目暂停"],
      contract_type_data: ["供货", "施工", "集成", "维保"],
      product_line_type_data: ["安防", "交通", "客流", "维保"],
      amount_state_unid_data: ["正常验收款", "正常维保"],
      search_form: {
        salesperson_unid: null,
        project_unid: null,
        customer_unid: null,
        guarantee_period: 6,
        year: null,
        month: null,
        contract_state: null,
        contract_type: null,
        product_line_type: null,
        acceptance_type: null,
        is_archive: null,
        amount_state_unid: null,
        confirm_income_amount: null
      },
      total_data: 1,
      current_page: 1,
      result_data: []
    };
  },
  computed: {
    year_list: function() {
      var arr = [];
      for (let i = 2000; i < 2041; i++) {
        arr.push(i);
      }
      return arr;
    }
  },
  methods: {
    // remote---------------------------------------------------------------------------------
    salespersonIdRemoteMethod(query) {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "simple/cates/09BB973F92/codes"
      })
        .then(response => {
          this.salesperson_unid_selected_data = response.data.list_data;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    projectIdRemoteMethod(query) {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "simple/cates/09BB973F92/codes"
      })
        .then(response => {
          this.project_unid_selected_data = response.data.list_data;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    customerIdRemoteMethod(query) {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "simple/cates/09BB973F92/codes"
      })
        .then(response => {
          this.customer_unid_selected_data = response.data.list_data;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    // remote---------------------------------------------------------------------------------
    reset() {
      this.$confirm("清空检索条件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$refs["search_form"].resetFields();
      });
    },
    commit() {
      sessionStorage.setItem("search_form", JSON.stringify(this.search_form));
      console.log(JSON.parse(sessionStorage.getItem("search_form")));
    },
    current_change(val) {
      this.current_page = val;
      console.log(this.current_page);
    }
  }
};
</script>

<style scoped>
</style>