order-ui-pc/src/views/sellOut/hawbWorkbench/search-modal.vue

<template>
  <el-dialog :visible.sync="innerVisible" width="1024px" title="筛选条件汇总" center :close-on-click-modal="false">
    <el-form>

      <el-row gutter="10">
        <el-row gutter="10">
          <el-input
            v-model="selectQueryValue"
            clearable
            size="mini"
            placeholder="关键字"
            maxlength="40"
            style="width:100%;padding:0px 10px;margin-bottom: 20px;"
          >
            <el-select
              slot="prepend"
              v-model="selectQueryKey"
              style="width: 140px"
              placeholder="关键字类型"
            >
              <el-option label="销售订单编号" value="orderCode" />
              <el-option label="发货申请单编号" value="outCode" />
              <el-option label="商品编号" value="good_code" />
              <el-option label="商品名称" value="good_name" />
              <el-option label="申请人部门" value="company_name" />
              <el-option label="申请人" value="apply_name" />
              <el-option label="采购单编号" value="cgdNo" />
            </el-select>
          </el-input>
        </el-row>

        <el-col :span="8">
          <el-form-item>
            <el-select v-model="formData.status" size="mini" placeholder="发货申请单状态" style="width:100%">
              <el-option
                v-for="opt in statusOptions"
                :key="opt.id"
                :value="opt.id"
                :label="opt.label"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item>
            <el-select v-model="formData.send_status" size="mini" placeholder="发货工单状态" style="width:100%">
              <el-option
                v-for="opt in sendStatusOptions"
                :key="opt.value"
                :value="opt.value"
                :label="opt.label"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item>
            <el-select
              v-model="formData.order_type"
              style="width:100%"
              size="mini"
              filterable
              clearable
              placeholder="商品类型"
              @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
              "
            >
              <el-option
                v-for="item in xs_order_type_options"
                :key="'orderstatus' + item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row gutter="10">
        <el-col :span="8">
          <el-form-item>
            <el-select
              v-model="formData.order_source"
              style="width:100%"
              size="mini"
              filterable
              clearable
              placeholder="订单来源"
              @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
              "
            >
              <el-option
                v-for="item in xs_order_source_options"
                :key="'orderstatus' + item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item>
            <search-supplier
              :size="'mini'"
              style="width:100%"
              :value="formData.supplierNo"
              :disabled="false"
              :placeholder="'供应商名称'"
              :code="formData.supplierNo"
              :is-detail="false"
              :no-disabled="true"
              @searchChange="supplierChange"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item>
            <search-customer
              :value="formData.companyNo"
              size="mini"
              :placeholder="'客户公司名称'"
              :names="customerName"
              :is-detail="true"
              @searchChange="customerChange"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="24">
          <el-form-item>
            <div style="display:flex;justify-content:flex-end">
              <el-button size="mini" @click="onReset">重置</el-button>
              <el-button size="mini" type="primary" @click="onConfirm">确认</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { xs_order_source_options, xs_order_type_options } from '@/assets/js/statusList'

const initalQuery = {
  status: '',
  companyNo: '',
  supplierNo: '',
  send_status: '',
  order_source: '',
  order_type: ''
}

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    customerName: '',
    selectQueryValue: '',
    selectQueryKey: 'orderCode',
    formData: { ...initalQuery },
    xs_order_source_options,
    xs_order_type_options,
    statusOptions: [
      { id: '0', label: '待发货' },
      { id: '1', label: '待库管发货' },
      { id: '2', label: '已发货待收货' },
      { id: '3', label: '已收货' },
      { id: '4', label: '已全部退货' }
    ],
    sendStatusOptions: [
      { value: '0', label: '不可拆单' },
      { value: '1', label: '可拆单' },
      { value: '2', label: '已拆单未发货' },
      { value: '3', label: '部分发货' },
      { value: '4', label: '全部发货' },
      { value: '5', label: '已收货' },
      { value: '6', label: '已退货' }
    ]
  }),
  computed: {
    innerVisible: {
      get() { return this.visible },
      set(newVal) { this.$emit('update:visible', newVal) }
    }
  },
  methods: {
    onConfirm() {
      this.innerVisible = false
      this.$emit('change', {
        ...this.formData,
        companyNo: this.getQeuryValue('companyNo'),
        supplierNo: this.getQeuryValue('supplierNo'),
        [this.selectQueryKey]: this.selectQueryValue
      })
    },
    getQeuryValue(queryKey) {
      const queryValue = this.formData[queryKey]
      return Array.isArray(queryValue) ? queryValue[0] : queryValue
    },
    async supplierChange(e) {
      const { code } = e
      this.formData.supplierNo = code ? [code] : []
      this.searchList()
    },
    async customerChange(e) {
      if (e && e.id) {
        this.formData.companyNo = [e.code]
        this.customerName = e.label
      } else {
        this.customerName = ''
        this.formData.companyNo = []
      }
    },
    onReset() {
      this.$emit('change', { ...initalQuery })
      this.selectQueryKey = 'orderCode'
      this.selectQueryValue = ''
      this.innerVisible = false
    }
  }
}
</script>