显示查询条件

---

注意

使用此组件必须:@wocwin/t-ui最新版本(v1.3.0以上)。且查询条件的配置需要满足存在下拉框的组件（如：el-select、el-date-picker）在展开的后面，否则会出现内层下拉框关闭导致外层el-select也跟着关闭。

前往

页

在组件中需配置：
table 数据源及表头信息
keywords 选项中的value（选项的值）,label(选项的标签)
@radioChange 选中事件，传出当前选中对象
isShowQuery 是否开启查询条件配置，其配置继承查询条件组件（TQueryCondition组件）的所有属性、事件、插槽

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-select-table
        :table="table"
        :columns="table.columns"
        :max-height="400"
        :keywords="{label:'name',value:'id'}"
        @radioChange="radioChange"
        :tableWidth="1000"
        isShowQuery
        multiple
        :opts="opts"
        @submit="conditionEnter"
      ></t-select-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script>
import selectData from './selectData.json'
const ADDRESS_TYPES = [
  {
    label: '前纺一车间',
    key: 'W1'
  },
  {
    label: '前纺二车间',
    key: 'W2'
  },
  {
    label: '前纺三车间',
    key: 'W3'
  }
]
export default {
  data() {
    return {
      table: {
        data: [
          { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
          { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
          { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
          { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
          { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
          { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
          { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
          { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
          { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
          { id: 10, code: 10, name: '物料名称10', spec: '物料规格10', unitName: '吨' },
          { id: 11, code: 11, name: '物料名称11', spec: '物料规格11', unitName: '吨' },
          { id: 12, code: 12, name: '物料名称12', spec: '物料规格12', unitName: '吨' },
          { id: 13, code: 13, name: '物料名称13', spec: '物料规格13', unitName: '吨' },
        ],
        columns: [
          { label: '物料编号', width: '100px', prop: 'code' },
          { label: '物料名称', width: '149px', prop: 'name' },
          { label: '规格', width: '149px', prop: 'spec' },
          { label: '单位', width: '110px', prop: 'unitName' },
          { label: '物料编号1', width: '149px', prop: 'code' },
          { label: '物料名称1', width: '149px', prop: 'name' },
          { label: '规格1', width: '149px', prop: 'spec' },
          { label: '单位1', width: '110px', prop: 'unitName' },
          { label: '物料编号11', width: '149px', prop: 'code' },
          { label: '物料名称11', width: '149px', prop: 'name' },
          { label: '规格11', width: '149px', prop: 'spec' },
          { label: '单位11', width: '110px', prop: 'unitName' },
          { label: '物料编号111', width: '149px', prop: 'code' },
          { label: '物料名称111', width: '149px', prop: 'name' },
          { label: '规格111', width: '149px', prop: 'spec' },
          { label: '单位111', width: '110px', prop: 'unitName' },
        ],
      },
      workshopNumList: [],
      queryData: {
        likeCargoNo: null,
        likeBookNo: null,
        likeTransportNo: null,
        workshopNum: null,
        workshopNum1: null,
        date: null,
        date1: null,
        date2: null,
        likeCargoName: null
      }
    }
  },
  computed: {
    opts() {
      return {
        likeTransportNo: {
          label: '运单编号',
          comp: 'el-input',
          span: 2
        },
        likeCargoName: {
          label: '货品名称',
          comp: 'el-input',
          span: 2
        },
        likeCargoNo: {
          label: '货源编号',
          comp: 't-select',
          bind: {
            optionSource: ADDRESS_TYPES,
          },
          span: 2
        },
        date: {
          label: '日期时间范围',
          comp: 't-date-picker',
          span: 2,
          bind: {
            type: 'datetimerange',
            'default-time': ['00:00:00', '23:59:59']
          }
        },
        date2: {
          label: '日期',
          comp: 't-date-picker',
          span: 2,
          bind: {
            type: 'date',
          }
        },
        workshopNum: {
          label: "t-select单选",
          comp: "t-select",
          span: 2,
          bind: {
            optionSource: this.workshopNumList,
            valueKey: "materialCode",
            labelKey: "materialName",
          },
          event: {
            change: (val) => {
              console.log('change---车间-单选', val)
            }
          }
        },
        workshopNum1: {
          label: "t-select多选",
          comp: "t-select",
          span: 2,
          bind: {
            multiple: true,
            optionSource: this.workshopNumList,
            valueKey: "materialCode",
            labelKey: "materialName",
          },
          event: {
            change: (val) => {
              console.log('change---车间-多选', val)
            }
          }
        },
        likeBookNo: {
          labelRender: () => {
            return (
              <el-tooltip content={'自定义label'} placement="top">
                <div>订单编号</div>
              </el-tooltip>
            )
          },
          placeholder: '自定义label',
          comp: 'el-input',
          span: 2
        },
        date1: {
          label: '日期范围1',
          comp: 't-date-picker',
          span: 2,
          bind: {
            type: 'daterange',
          }
        },

      }
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await selectData
      if (res.success) {
        // console.log('获取品名下拉数据', res.data)
        this.workshopNumList = res.data
      }
    },
    // 单选
    radioChange(row) {
      console.log('传给后台的值', row)
    },
    conditionEnter(data) {
      console.log('点击搜索查询', data)
    },
    // 车间编号
    change(formData) {
      console.log('车间编号--change事件触发', formData)
    }
  }
}
</script>

<style>
</style>

显示代码

wocwin微信二维码