search.vue

<template>
  <div id="search">
    <el-card class="box-card">
      <div slot="header" class="clearfix ">
        <span style="font-size:24px;padding-right:0px;color:#eff0dc">检索条件</span>
      </div>
      <el-form id="form" :inline="true" :model="search_form" class="demo-form-inline" label-width="100px" ref="search_form" :rules="search_form_rules">
        <el-row style="text-align:left">
          <el-col :span="6">
            <el-form-item label="合同编号" prop="contract_unid">
              <el-input style="width:217px" v-model="search_form.contract_unid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称" prop="project_name__like">
              <el-input style="width:217px" v-model="search_form.project_name__like"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="customer_name__like">
              <el-input style="width:217px" v-model="search_form.customer_name__like"></el-input>
            </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" clearable>
                <el-option v-for="item in amount_state_unid_data" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align:left">
          <el-col :span="6">
            <el-form-item label="合同状态" prop="contract_state">
              <el-select v-model="search_form.contract_state" clearable>
                <el-option v-for="item in contract_state_data" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属年份" prop="year">
              <el-select v-model="search_form.year" clearable>
                <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" clearable>
                <el-option v-for="n in month_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="contract_type">
              <el-select v-model="search_form.contract_type" clearable>
                <el-option v-for="item in contract_type_data" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align:left">
          <el-col :span="6">
            <el-form-item label="产品线类型" prop="product_line_type">
              <el-select v-model="search_form.product_line_type" clearable>
                <el-option v-for="item in product_line_type_data" :key="item.code" :label="item.name" :value="item.code">
                </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" clearable>
                <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" clearable>
                <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="销售员" v-if="sales">
              <el-input style="width:217px" :readonly="true" v-model="salesperson_name"></el-input>
            </el-form-item>
            <el-form-item label="销售员" prop="salesperson_name__like" v-if="!sales">
              <el-input style="width:217px" v-model="search_form.salesperson_name__like"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align:left">
          <el-col :span="6">
            <el-form-item label="确认收入金额" prop="confirm_income_amount">
              <el-input style="width:217px" v-model="search_form.confirm_income_amount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="质保周期(月)" prop="guarantee_period">
              <el-select v-model="search_form.guarantee_period" clearable>
                <el-option v-for="n in guarantee_period_list" :key="n" :label="n" :value="n"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align:left">
            <el-form-item label="省" prop="province">
              <el-select style="width:217px" v-model="search_form.province" clearable placeholder="省" @change="get_cities()">
                <el-option v-for="(item,index) in provinces" :key="index" :label="item.name" :value="item.province_unid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align:left">
            <el-form-item label="市" prop="city">
              <el-select style="width:217px" v-model="search_form.city" clearable placeholder="市" @change="get_counties()">
                <el-option v-for="(item,index) in cities" :key="index" :label="item.name" :value="item.city_unid">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item prop="county">
              <el-select style="width:100px" v-model="search_form.county" clearable placeholder="区县">
                <el-option v-for="(item,index) in counties" :key="index" :label="item.name" :value="item.county_unid">
                </el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row style="text-align:left">
          <el-col :span="12">
            <el-form-item label="签订日期" prop="start_date">
              <el-date-picker style="width:202px" v-model="search_form.start_date" type="date" placeholder="开始日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="end_date">
              <el-date-picker style="width:202px" v-model="search_form.end_date" type="date" placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="逾期天数" prop="overdays_start_point">
              <el-input v-model="search_form.overdays_start_point" placeholder="不填默认为0"></el-input>
            </el-form-item>
            <el-form-item prop="overdays_end_point">
              <el-input v-model="search_form.overdays_end_point" placeholder="不填则无上限"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="text-align:left">
          <el-col :span="12">
            <el-form-item label="合同金额" prop="amount_start_point">
              <el-input v-model="search_form.amount_start_point" placeholder="不填默认为0"></el-input>
            </el-form-item>
            <el-form-item prop="amount_end_point">
              <el-input v-model="search_form.amount_end_point" placeholder="不填则无上限"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应收账款余额" prop="leave_amount_start_point">
              <el-input v-model="search_form.leave_amount_start_point" placeholder="不填默认为0"></el-input>
            </el-form-item>
            <el-form-item prop="leave_amount_end_point">
              <el-input v-model="search_form.leave_amount_end_point" placeholder="不填则无上限"></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;padding-right:0px;color:#eff0dc">检索结果</span>
      </div>
      <!-- test------------------------------------------------------------------------------------------------ -->

      <!-- default-expand-all ： 是否默认展开所有行 -->
      <el-table id="data_table" :data="list_data" style="width: 100%" row-key="contract_unid" stripe highlight-current-row border :default-expand-all="true">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row type="flex" justify="space-around" style="text-align:left;padding-bottom:5px">
              <el-col :span="4">
                <span class="pre">暂停金额:</span>{{scope.row.stop_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">坏账金额:</span>{{scope.row.bad_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">豁免金额:</span>{{scope.row.exemptions_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">抵扣金额:</span>{{scope.row.deduct_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">累计已收款:</span>{{scope.row.total_reback_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">验收款金额:</span>{{scope.row.acceptanc_pay}}
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-around" style="text-align:left;padding-bottom:5px">
              <el-col :span="4">
                <span class="pre">合同余额:</span>{{scope.row.contract_remain}}
              </el-col>
              <el-col :span="4">
                <span class="pre">产品线类型:</span>{{scope.row.product_line_type_name}}
              </el-col>
              <el-col :span="4">
                <span class="pre">累计应收:</span>{{scope.row.total_receive_amount}}
              </el-col>
              <el-col :span="4">
                <span class="pre">应收账款余额:</span>{{scope.row.total_amount_remain}}
              </el-col>
              <el-col :span="4">
                <span class="pre">逾期天数:</span>{{scope.row.over_days}}
              </el-col>
              <el-col :span="4">
                <span class="pre">质保金额:</span>{{scope.row.mainten_pay_deliver}}
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-around" style="text-align:left;padding-bottom:5px">
              <el-col :span="4">
                <span class="pre">预付款金额:</span>{{scope.row.advance_pay}}
              </el-col>
              <el-col :span="4">
                <span class="pre">预付款到期日:</span>{{scope.row.advance_pay_date}}
              </el-col>
              <el-col :span="4">
                <span class="pre">到货款金额:</span>{{scope.row.arrive_pay}}
              </el-col>
              <el-col :span="4">
                <span class="pre">发货日期:</span>{{scope.row.deliver_date}}
              </el-col>
              <el-col :span="4">
                <span class="pre">到货款到期日:</span>{{scope.row.arrive_pay_date}}
              </el-col>
              <el-col :span="4">
                <span class="pre">质保到期日:</span>{{scope.row.mainten_pay_deliver_date}}
              </el-col>
            </el-row>
            <el-row style="text-align:left;padding-bottom:5px">
              <span class="pre">备注:</span>{{scope.row.contract_note}}
            </el-row>
          </template>
        </el-table-column>

        <el-table-column label="合同编号" prop="contract_unid" min-width="9%" align="center">
        </el-table-column>
        <el-table-column label="项目名称" prop="project_name" min-width="11%" align="center">
        </el-table-column>
        <el-table-column label="客户名称" prop="customer_name" min-width="11%" align="center">
        </el-table-column>
        <el-table-column label="合同金额" prop="contract_amount" min-width="9%" align="center">
        </el-table-column>
        <el-table-column label="签订时间" prop="sign_date" min-width="8%" align="center">
        </el-table-column>
        <el-table-column label="验收款日期" prop="acceptanc_date" min-width="8%" align="center">
        </el-table-column>
        <el-table-column label="验收款到期日" prop="acceptanc_pay_date" min-width="8%" align="center">
        </el-table-column>
        <!-- <el-table-column label="产品线类型" prop="product_line_type_name" min-width="9%" align="center">
        </el-table-column> -->
        <el-table-column label="合同状态" prop="contract_state_name" min-width="9%" align="center">
        </el-table-column>
        <el-table-column label="销售员" prop="salesperson_name" min-width="7%" align="center">
        </el-table-column>
        <el-table-column label="省" prop="province_name" min-width="6%" align="center">
        </el-table-column>
        <el-table-column label="市" prop="city_name" min-width="6%" align="center">
        </el-table-column>
        <!-- <el-table-column label="县" prop="county_name" min-width="7%" align="center">
        </el-table-column> -->
        <el-table-column label="操作" min-width="4%" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="go_to(scope.row.contract_unid)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- test------------------------------------------------------------------------------------------------ -->
      <el-row style="padding-top:50px">
        <el-col :span="20">
          <el-pagination style="float:left" background layout="prev, pager, next" :total="total_data" :page-size="limit" prev-text="上一页" next-text="下一页" :current-page="current_page" @current-change="page_change">
          </el-pagination>
        </el-col>

        <el-col :span="4">
          <el-button-group style="float:right">
            <el-button type="primary" size="small" @click="export_contract">导出</el-button>
            <el-button type="primary" size="small" @click="import_click">导入</el-button>
            <input id="import_unview" type="file" style="display:none" @change="import_contract">
          </el-button-group>
        </el-col>

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

<script>
const twodecimalrule = {
  pattern: /((^[1-9]\d*)|^0)(\.\d{2})$/,
  message: "请输入数字并保留两位小数",
  trigger: "blur"
};
export default {
  name: "search",
  data() {
    return {
      sales: false,
      salesperson_name: null,
      provinces: [],
      cities: [],
      counties: [],
      code_base_url: disparch_data.code_base_url,
      contract_base_url: disparch_data.contract_base_url,
      month_list: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12"
      ],
      contract_state_data: [],
      contract_type_data: [],
      product_line_type_data: [],
      amount_state_unid_data: [],
      search_form: {
        contract_unid: null,
        salesperson_unid: null,
        salesperson_name__like: null,
        project_name__like: null,
        customer_name__like: null,
        guarantee_period: null,
        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,
        province: null,
        city: null,
        // county: null,
        start_data: null,
        end_date: null,
        overdays_start_point: null,
        overdays_end_point: null,
        amount_start_point: null,
        amount_end_point: null,
        leave_amount_start_point: null,
        leave_amount_end_point: null
      },

      list_data: [],
      limit: 10,
      total_data: 0,
      current_page: 1,

      search_form_rules: {
        confirm_income_amount: twodecimalrule,
        amount_start_point: twodecimalrule,
        amount_end_point: twodecimalrule,
        leave_amount_start_point: twodecimalrule,
        leave_amount_end_point: twodecimalrule,
        overdays_start_point: {
          pattern: /((^[1-9]\d*)|^0)$/,
          message: "请输入正确天数",
          trigger: "blur"
        },
        overdays_end_point: {
          pattern: /((^[1-9]\d*)|^0)$/,
          message: "请输入正确天数",
          trigger: "blur"
        }
      }
    };
  },
  computed: {
    year_list: function() {
      var arr = [];
      for (let i = 2000; i < 2041; i++) {
        arr.push(i);
      }
      return arr;
    },
    offset() {
      return (this.current_page - 1) * this.limit;
    },
    guarantee_period_list() {
      var arr = [];
      var a = 6;
      for (let i = 0; i < 10; i++) {
        const element = (10)[i];
        arr.push(a);
        a += 6;
      }
      return arr;
    }
  },
  methods: {
    import_click() {
      document.getElementById("import_unview").click();
    },
    import_contract() {
      if (!document.getElementById("import_unview").files[0]) {
        return;
      }
      var form = new FormData();
      form.append("file", document.getElementById("import_unview").files[0]);
      this.$Axios({
        method: "post",
        url: this.contract_base_url + "import",
        data: form
      })
        .then(res => {
          if (res.data.ecode == "500") {
            this.$message.error(res.data.enote);
          } else if (res.data.ecode == "200") {
            this.$message({
              type: "success",
              message: "导入成功"
            });
          } else if (res.data != [] && res.data[0].contract_unid) {
            var message = [];
            const h = this.$createElement;
            res.data.forEach(e => {
              message.push(h("p", null, e.contract_unid));
            });
            this.$message({
              type: "warning",
              message: "部分导入信息数据校验未通过,请检查后重新导入",
              duration: 5000
            });
            this.$notify({
              title: "校验未通过的合同的编号为：",
              duration: 0,
              message: h("p", null, message),
              type: "error"
            });
          } else {
            if (res.data.length > 0) {
              var message = [];
              const h = this.$createElement;
              res.data.forEach(e => {
                message.push(h("p", null, e));
              });
              this.$message({
                type: "warning",
                message: "部分导入信息已存在,请检查后重新导入",
                duration: 5000
              });
              this.$notify({
                title: "重复的数据编号",
                duration: 0,
                message: h("p", null, message),
                type: "error"
              });
            }
          }
          var node = document.getElementById("import_unview");
          node.value = "";
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    // get start~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    get_amount_state_unid_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/42407C5EF2/codes"
      })
        .then(res => {
          this.amount_state_unid_data = res.data.list_data;
        })
        .catch(err => {});
    },
    get_contract_type_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/8EC31D08A0/codes"
      })
        .then(res => {
          this.contract_type_data = res.data.list_data;
        })
        .catch(err => {});
    },
    get_contract_state_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/13BEFACBCF/codes"
      })
        .then(res => {
          this.contract_state_data = res.data.list_data;
        })
        .catch(err => {});
    },
    get_product_line_type_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/4FC51AD3C9/codes"
      })
        .then(res => {
          this.product_line_type_data = res.data.list_data;
        })
        .catch(err => {});
    },
    get_provinces() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "countries/0E229CD043/provinces"
      })
        .then(response => {
          this.provinces = response.data.list_data;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    get_cities() {
      this.search_form.city = "";
      // this.search_form.county = "";
      if (this.search_form.province) {
        this.$Axios({
          method: "get",
          url:
            this.code_base_url +
            "countries/0E229CD043/provinces/" +
            this.search_form.province +
            "/cities"
        })
          .then(response => {
            this.cities = response.data.list_data;
          })
          .catch(err => {
            console.log(err.message);
          });
      }
    },
    get_counties() {
      // this.search_form.county = "";
      if (this.search_form.province && this.search_form.city) {
        this.$Axios({
          method: "get",
          url:
            this.code_base_url +
            "countries/0E229CD043/provinces/" +
            this.search_form.province +
            "/cities/" +
            this.search_form.city +
            "/counties"
        })
          .then(response => {
            this.counties = response.data.list_data;
          })
          .catch(err => {
            console.log(err.message);
          });
      }
    },
    get_list_data() {
      var a = this.search_form;
      a.offset = this.offset;
      a.limit = this.limit;
      this.$Axios({
        methods: "get",
        url: this.contract_base_url,
        params: a,
        headers: { "Content-Type": "application/json" }
      })
        .then(response => {
          if (response.data.ecode == "500") {
            this.$message.error("筛选异常");
            return;
          }
          this.total_data = response.data.total_number;
          this.list_data = response.data.list_data;
          for (let i = 0; i < this.list_data.length; i++) {
            const e = this.list_data[i];
            for (let j = 0; j < this.contract_state_data.length; j++) {
              const a = this.contract_state_data[j];
              if (e.contract_state == a.code) {
                this.list_data[i].contract_state_name = a.name;
              }
            }
            for (let k = 0; k < this.product_line_type_data.length; k++) {
              const b = this.product_line_type_data[k];
              if (e.product_line_type == b.code) {
                this.list_data[i].product_line_type_name = b.name;
              }
            }
            if (!e.over_days) {
              e.over_days = 0;
            }
          }
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    get_year(date) {
      if (date) {
        return date.slice(0, 4);
      }
    },
    get_month(date) {
      if (date) {
        return date.slice(5, 7);
      }
    },

    // get end---------------------------------------------------------------------------------------------
    reset() {
      this.$refs["search_form"].resetFields();
    },

    commit() {
      this.current_page = 1;
      sessionStorage.setItem(
        "search_condition",
        JSON.stringify(this.search_form)
      );
      this.get_list_data();
    },
    page_change(val) {
      this.search_form = JSON.parse(sessionStorage.getItem("search_condition"));
      this.current_page = val;
      console.log(this.current_page);
      this.get_list_data();
    },
    export_contract() {
      this.$Axios({
        method: "get",
        url: this.contract_base_url + "export",
        params: this.search_form,
        responseType: "blob"
      })
        .then(res => {
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel;charset=UTF-8"
          });
          // let ourl = URL.createObjectURL(blob);
          // window.location.href = ourl;
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "合同.xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    go_to(id) {
      sessionStorage.setItem("modify", "1");
      this.$router.push("/nav/contract/" + id);
    }
  },
  created() {
    if (sessionStorage.getItem("user_roles") == "null") {
      this.salesperson_name = sessionStorage.getItem("user_name");
      this.sales = true;
      this.search_form.salesperson_unid = sessionStorage.getItem("user_unid");
    }
    if (sessionStorage.getItem("provinces")) {
      this.provinces = JSON.parse(sessionStorage.getItem("provinces"));
    } else {
      this.get_provinces();
    }
    if (sessionStorage.getItem("amount_state_unid_data")) {
      this.amount_state_unid_data = JSON.parse(
        sessionStorage.getItem("amount_state_unid_data")
      );
    } else {
      this.get_amount_state_unid_data();
    }
    if (sessionStorage.getItem("contract_type_data")) {
      this.contract_type_data = JSON.parse(
        sessionStorage.getItem("contract_type_data")
      );
    } else {
      this.get_contract_type_data();
    }
    if (sessionStorage.getItem("contract_state_data")) {
      this.contract_state_data = JSON.parse(
        sessionStorage.getItem("contract_state_data")
      );
    } else {
      this.get_contract_state_data();
    }
    if (sessionStorage.getItem("product_line_type_data")) {
      this.product_line_type_data = JSON.parse(
        sessionStorage.getItem("product_line_type_data")
      );
    } else {
      this.get_product_line_type_data();
    }
  }
};
</script>

<style scoped>
span {
  padding-right: 10px;
}
#search >>> label {
  color: black;
}
#search >>> .el-card__body {
  background: lightgray;
}
#search >>> input {
  border-color: black;
  color: black;
}
#search >>> .el-card__header {
  background-color: #34352c;
}
#search >>> thead > tr > th > .cell {
  color: black;
}
#search >>> thead > tr > th {
  background-color: lightgray;
}
#data_table .el-table__expanded-cell .pre {
  text-decoration: underline;
  /* font-style: oblique; */
  color: gray;
}
#data_table {
  color: black;
}
</style>