search.vue

<template>
  <div id="search" @keypress.enter.prevent="commit()">
    <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="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="销售员" 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-col :span="6">
            <el-form-item label="合同状态" prop="contract_state_list">
              <el-select v-model="search_form.contract_state_list" multiple>
                <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-row>
        <el-row style="text-align:left">
          <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>
        <!-- hide -->
        <el-row style="margin-bottom:10px">
          <span id="hide_icon_text" @click="show_more">-------
            <i :class="hide_icon">{{hide_text}}</i>&nbsp;&nbsp;-------
          </span>
        </el-row>
        <el-collapse-transition>
          <div id="hide" v-show="!hide_search_item">
            <el-row style="text-align:left">

              <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-col :span="6" style="text-align:left">
                <el-form-item label="省" prop="province">
                  <el-select style="width:217px" v-model="search_form.province" filterable 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" filterable clearable placeholder="市">
                    <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-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-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="确认收入金额" prop="confirm_income_amount">
                  <el-input style="width:217px" v-model="search_form.confirm_income_amount"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row style="text-align:left">
            </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-row>
          </div>
        </el-collapse-transition>
      </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" border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row type="flex" justify="space-between" 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.contract_state_name}}
              </el-col>

            </el-row>
            <el-row type="flex" justify="space-between" style="text-align:left;padding-bottom:5px">
              <el-col :span="4">
                <span class="pre">验收款金额:</span>{{scope.row.acceptanc_pay}}
              </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.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-between" 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-row>
            <el-row type="flex" justify="space-between" style="text-align:left;padding-bottom:5px">
              <el-col :span="4">
                <span class="pre">省:</span>{{scope.row.province_name}}
              </el-col>
              <el-col :span="4">
                <span class="pre">市:</span>{{scope.row.city_name}}
              </el-col>
              <el-col :span="4">
                <span class="pre">质保到期日:</span>{{scope.row.mainten_pay_deliver_date}}
              </el-col>
              <el-col :span="4">
                <span class="pre">验收日期:</span>{{scope.row.acceptanc_date}}
              </el-col>
              <el-col :span="4">
                <span class="pre">验收款到期日:</span>{{scope.row.acceptanc_pay_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 sortable label="合同编号" prop="contract_unid" min-width="110px" align="center">
        </el-table-column>
        <el-table-column sortable :sort-method="project_name_sort" label="项目名称" prop="project_name" min-width="150px" align="center">
        </el-table-column>
        <el-table-column sortable :sort-method="customer_name_sort" label="客户名称" prop="customer_name" min-width="150px" align="center">
        </el-table-column>
        <el-table-column sortable :sort-method="salesperson_name_sort" label="销售员" prop="salesperson_name" min-width="100px" align="center">
        </el-table-column>
        <el-table-column sortable :sort-method="contract_amount_sort" label="合同金额" prop="contract_amount" min-width="120px" align="center">
        </el-table-column>
        <el-table-column sortable :sort-method="sign_date_sort" label="签订时间" prop="sign_date" min-width="120px" align="center">
        </el-table-column>
        <el-table-column sortable :sort-method="total_reback_amount_sort" label="累计回款" prop="total_reback_amount" min-width="120px" align="center">
        </el-table-column>
        <el-table-column sortable :sort-method="contract_remain_sort" label="合同余额" prop="contract_remain" min-width="120px" align="center">
        </el-table-column>
        <el-table-column sortable :sort-method="total_amount_remain_sort" label="应收余额" prop="total_amount_remain" min-width="120px" align="center">
        </el-table-column>
        <el-table-column sortable label="账款状态" prop="amount_state_unid_name" min-width="120px" align="center">
        </el-table-column>
        <el-table-column label="操作" min-width="100px" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="go_to(scope.row.contract_unid)">
              详情
            </el-button>
            <el-button type="text" style="color:red" @click="delete_contract(scope.row.contract_unid)" v-if="management">
              删除
            </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="sizes,total,prev, pager, next" @size-change="handle_size_change" :page-sizes="[10,50,100,300,500,1000,1000000]" :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_item_selected_dialog_show = true">导出</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>
    <el-dialog id="export_item_dialog" title="请选择导出项" :visible.sync="export_item_selected_dialog_show" width="32%" :show-close="false">
      <div style="text-align:left">
        <el-checkbox :indeterminate="is_indeterminate" v-model="check_all" @change="check_all_item">全选</el-checkbox>
        <el-checkbox-group style="margin-top:20px" v-model="checked_item_list" @change="chek_item">
          <el-checkbox v-for="item in display_item_list" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button-group>
          <el-button type="primary" @click="export_contract()" size="small">确定</el-button>
          <el-button @click="export_item_selected_dialog_show = false" size="small">取消</el-button>
        </el-button-group>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  const twodecimalrule = {
    pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
    message: "请输入正确",
    trigger: "blur"
  };
  export default {
    name: "search",
    data() {
      return {
        management: false,
        checked_item_list: [],
        check_all: false,
        is_indeterminate: false,
        display_item_list: [
          {
            key: "customer_name",
            value: "客户姓名"
          },
          {
            key: "year",
            value: "所属年份"
          },
          {
            key: "month",
            value: "所属月份"
          },
          {
            key: "sign_date",
            value: "签订日期"
          },
          {
            key: "salesperson_unid",
            value: "销售员"
          },
          {
            key: "product_line_type",
            value: "产品线类型"
          },
          {
            key: "province",
            value: "省"
          },
          {
            key: "city",
            value: "市"
          },
          {
            key: "project_name",
            value: "项目名称"
          },
          {
            key: "contract_amount",
            value: "合同金额"
          },
          {
            key: "stop_amount",
            value: "暂停金额"
          },
          {
            key: "exemptions_amount",
            value: "豁免金额"
          },
          {
            key: "deduct_amount",
            value: "折扣金额"
          },
          {
            key: "total_reback_amount",
            value: "累计已收款"
          },
          {
            key: "contract_remain",
            value: "合同余额"
          },
          {
            key: "amount_state_unid",
            value: "账款状态"
          },
          {
            key: "total_receive_amount",
            value: "累计应收款"
          },
          {
            key: "total_amount_remain",
            value: "应收账款余额"
          },
          {
            key: "over_days",
            value: "逾期天数"
          },
          {
            key: "advance_pay",
            value: "预付款金额"
          },
          {
            key: "advance_pay_date",
            value: "预付款到期日"
          },
          {
            key: "arrive_pay",
            value: "到货款金额"
          },
          {
            key: "deliver_date",
            value: "发货日期"
          },
          {
            key: "arrive_pay_date",
            value: "到货款到期日"
          },
          {
            key: "acceptanc_pay",
            value: "验收款金额"
          },
          {
            key: "acceptanc_date",
            value: "验收日期"
          },
          {
            key: "acceptanc_pay_date",
            value: "验收款到期日"
          },
          {
            key: "mainten_pay",
            value: "质保金额"
          },
          {
            key: "mainten_pay_date",
            value: "质保款到期日"
          },
          {
            key: "goods_acceptanc_date",
            value: "到货验收日期"
          },
          {
            key: "confirm_income_amount",
            value: "确认收入金额"
          },
          {
            key: "total_receipt_amount",
            value: "累计开票金额"
          }
        ],
        export_item_selected_dialog_show: false,
        hide_icon: "icon i-arrowdown-copy",
        hide_text: "显示更多",
        hide_search_item: true,
        sales: false,
        salesperson_name: null,
        provinces: [],
        cities: [],
        counties: [],
        code_base_url: this.$disparch_data.code_base_url,
        contract_base_url: this.$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_list: [],
          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,
          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 a = new Date().getFullYear();
        var arr = [];
        for (let i = a; i >= 2000; 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: {
      delete_contract(unid) {
        this.$confirm(
          "是否删除合同:<p style='text-align:center;color:red;font-weight:bolder'>" +
            unid +
            "<p>",
          "确认信息",
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: "确认删除",
            cancelButtonText: "取消"
          }
        )
          .then(() => {
            this.delete_contract_by_unid(unid);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "放弃删除"
            });
          });
      },
      delete_contract_by_unid(unid) {
        this.$Axios({
          method: "delete",
          url: this.contract_base_url + unid
        })
          .then(res => {
            this.get_list_data();
            if (res.data.ecode == "200") {
              this.$message({
                type: "success",
                message: "删除成功"
              });
            } else {
              this.$message({
                type: "warning",
                message: "删除失败"
              });
            }
          })
          .catch(err => {
            // console.log(err);
            this.$message({
              type: "warning",
              message: "删除失败"
            });
          });
      },
      /**
       * 全选
       */
      check_all_item(val) {
        if (val) {
          this.display_item_list.forEach(e => {
            this.checked_item_list.push(e.key);
          });
        } else {
          this.checked_item_list = [];
        }
        this.is_indeterminate = false;
      },
      chek_item(value) {
        let checkedCount = value.length;
        this.check_all = checkedCount === this.display_item_list.length;
        this.is_indeterminate =
          checkedCount > 0 && checkedCount < this.display_item_list.length;
      },
      /**
       * 自定义排序规则
       */
      project_name_sort(a, b) {
        if (a.project_name && b.project_name) {
          return a.project_name.trim().localeCompare(b.project_name.trim());
        }
      },
      customer_name_sort(a, b) {
        if (a.customer && b.customer_name) {
          return a.customer_name.trim().localeCompare(b.customer_name.trim());
        }
      },
      salesperson_name_sort(a, b) {
        if (a.salesperson_name && b.salesperson_name) {
          return a.salesperson_name
            .trim()
            .localeCompare(b.salesperson_name.trim());
        }
      },
      sign_date_sort(a, b) {
        if (a.sign_date == null && b.sign_date == null) {
          return 0;
        }
        if (a.sign_date == null) {
          return -1;
        }
        if (b.sign_date == null) {
          return 1;
        }
        var date1s = a.sign_date.split("-");
        var date2s = b.sign_date.split("-");
        return (
          new Date(date1s[0], date1s[1] - 1, date1s[2]).getTime() -
          new Date(date2s[0], date2s[1] - 1, date2s[2]).getTime()
        );
      },
      contract_amount_sort(a, b) {
        return this.amount_sort(a.contract_amount, b.contract_amount);
      },
      total_reback_amount_sort(a, b) {
        return this.amount_sort(a.total_reback_amount, b.total_reback_amount);
      },
      contract_remain_sort(a, b) {
        return this.amount_sort(a.contract_remain, b.contract_remain);
      },
      total_amount_remain_sort(a, b) {
        return this.amount_sort(a.total_amount_remain, b.total_amount_remain);
      },
      amount_sort(a, b) {
        if (a == null && b == null) {
          return 0;
        }
        if (a == null) {
          return -1;
        }
        if (b == null) {
          return 1;
        }
        return a - b;
      },

      show_more() {
        this.hide_search_item = !this.hide_search_item;
        this.hide_search_item == true
          ? (this.hide_text = "显示更多")
          : (this.hide_text = "收起");
        this.hide_search_item == true
          ? (this.hide_icon = "icon i-arrowdown-copy")
          : (this.hide_icon = "icon i-arrowup");
      },
      /**
       * 点击导入按钮，弹出文件选择栏，当选择文件后
       * type为file的input的文件列表会改变
       * 检测到这种改变后，调用import_contract方法
       */
      import_click() {
        document.getElementById("import_unview").click();
      },
      import_contract() {
        if (!document.getElementById("import_unview").files[0]) {
          return;
        }
        var ranke = 0;
        if (!this.management) {
          var role_name = JSON.parse(sessionStorage.getItem("user_roles"))[0]
            .name;
          switch (role_name) {
            case "商务部":
              ranke = 1;
              break;
            case "财务部":
              ranke = 2;
              break;
            case "工程部":
              ranke = 4;
              break;
            case "生产部":
              ranke = 3;
              break;
            default:
              ranke = 1;
              break;
          }
        }
        var form = new FormData();
        form.append("file", document.getElementById("import_unview").files[0]);
        form.append("ranke", ranke);
        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_list_data() {
        var a = this.search_form;
        if (a.contract_state_list.length > 0) {
          a.contract_states = a.contract_state_list.join(",");
        } else {
          a.contract_states = "";
        }
        Object.keys(a).forEach(key => {
          if (a[key] && typeof a[key] == "string") {
            // console.log(a[key]);
            a[key] = a[key].trim();
          }
        });
        a.offset = this.offset;
        a.limit = this.limit;
        a.date = Date();
        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.$refs["search_form"].validate(valid => {
          if (valid) {
            this.current_page = 1;
            sessionStorage.setItem(
              "search_condition",
              JSON.stringify(this.search_form)
            );
            this.get_list_data();
          } else {
            this.$message({
              type: "warning",
              message: "请检查数据格式是否正确"
            });
          }
        });
      },
      /**
       * page控件的一些操作
       */
      handle_size_change(val) {
        this.limit = val;
        if (this.list_data.length != 0) {
          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();
      },
      /**
       * 导出合同的excel表格
       */
      export_contract() {
        if (this.checked_item_list.length > 0) {
          this.search_form.columns = this.checked_item_list.join(",");
        }
        // console.log(this.search_form.columns);
        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"
            });
            if (navigator.appVersion.toString().indexOf(".NET") > 0) {
              window.navigator.msSaveBlob(blob, "合同.xlsx");
            } else {
              // 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对象
            }
            this.export_item_selected_dialog_show = false;
          })
          .catch(err => {
            this.check_all = false;
            this.checked_item_list = [];
            // console.log(err.message);
          });
      },
      /**
       * 点击详情后进度contract页面
       */
      go_to(id) {
        sessionStorage.setItem("modify", "1");
        this.$router.push("/nav/contract/" + id);
      },
      /**
       * 改变dialog背景颜色
       */
      change_dialog() {
        if (localStorage.getItem("style")) {
          var style = JSON.parse(localStorage.getItem("style"));
          var dialogs = document.getElementsByClassName("el-dialog");
          for (let i = 0; i < dialogs.length; i++) {
            const e = dialogs[i];
            e.style.backgroundColor = style.color;
            e.style.backgroundImage = style.image;
          }
        }
      }
    },
    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();
      }
      /**
       *Admin具有删除合同的权限
       */
      if (sessionStorage.getItem("user_name") === "Admin") {
        this.management = true;
      }
    },
    mounted() {
      this.change_dialog();
    }
  };
</script>

<style scoped>
span {
  padding-right: 10px;
}
#search >>> label {
  color: black;
}
#search >>> .el-card {
  background-color: rgba(0, 0, 0, 0);
}
#search >>> .el-card__body {
  background-color: rgba(0, 0, 0, 0);
}
#search >>> input {
  border-color: black;
  color: black;
  background-color: rgba(0, 0, 0, 0.3);
}
#search >>> .el-card__header {
  background-color: #34352c;
}
#search >>> .cell {
  color: black;
}
#data_table .el-table__expanded-cell .pre {
  text-decoration: underline;
  /* font-style: oblique; */
  color: #555;
}
#data_table {
  color: black;
}
#search >>> tr,
#search >>> .el-table {
  background-color: rgba(255, 255, 255, 0.3);
}
#search >>> .el-table__row {
  background-color: rgba(0, 0, 0, 0.1);
}
#search >>> th {
  background-color: rgba(0, 0, 0, 0);
}
#search >>> .el-table__expanded-cell {
  background-color: rgba(0, 0, 0, 0);
}
#search >>> .el-pager li {
  background-color: rgba(255, 255, 255, 0.3);
}
#search >>> .el-pager .active {
  background-color: rgba(0, 0, 0, 0.4);
}
#search >>> .el-pagination .btn-next,
#search >>> .el-pagination .btn-prev {
  background-color: rgba(0, 0, 0, 0.4);
}
#hide_icon_text:hover {
  cursor: pointer;
  color: orangered;
  transition: all ease 0.5s;
}
#search >>> .el-dialog {
  border-radius: 20px;
  background-color: lightblue;
}
#search >>> .el-checkbox {
  width: 100px;
  margin-left: 20px;
}
#search >>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: crimson;
}
</style>