kd-aiot-frontend-aps/src/views/workOrder/components/order-search.vue

<!-- 搜索表单 -->
<template>
  <el-form
    label-width="90px"
    class="ele-form-search"
    @keyup.enter.native="search"
    @submit.native.prevent
  >
    <el-row :gutter="15">
      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
      <!--        <el-form-item label="关键字:">-->
      <!--          <el-input clearable v-model="where.keyWord" placeholder="请输入" />-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->

      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
      <!--        <el-form-item label="生产工单号:">-->
      <!--          <el-input clearable v-model="where.code" placeholder="请输入" />-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
      <!--        <el-form-item label="计划编号:">-->
      <!--          <el-input-->
      <!--            clearable-->
      <!--            v-model="where.productionPlanCode"-->
      <!--            placeholder="请输入"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
      <!--        <el-form-item label="工艺路线:">-->
      <!--          <el-input-->
      <!--            clearable-->
      <!--            v-model="where.produceRoutingName"-->
      <!--            placeholder="请输入"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
      <!--        <el-form-item label="产品编码:">-->
      <!--          <el-input-->
      <!--            clearable-->
      <!--            v-model="where.productCode"-->
      <!--            placeholder="请输入"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
      <!--        <el-form-item label="产品名称:">-->
      <!--          <el-input-->
      <!--            clearable-->
      <!--            v-model="where.productName"-->
      <!--            placeholder="请输入"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->

      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
      <!--        <el-form-item label="牌号:">-->
      <!--          <el-input clearable v-model="where.brandNo" placeholder="请输入" />-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->

      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
        <el-form-item label="状态:">
          <el-select
            size="mini"
            v-model="where.status"
            placeholder="请选择"
            clearable
            class="ele-block"
          >
            <el-option
              v-for="item in statusOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
      <!--        <el-form-item label="型号:">-->
      <!--          <el-input clearable v-model="where.model" placeholder="请输入" />-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <el-col v-bind="styleResponsive ? { lg: 6, md: 6 } : { span: 6 }">
        <el-form-item label="创建时间:">
          <el-date-picker
            size="mini"
            class="w100"
            v-model="where.createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>

      <el-col v-bind="styleResponsive ? { lg: 5, md: 7 } : { span: 3 }">
        <el-form-item label="所属工厂:">
          <el-select
            size="mini"
            v-model="where.factoryId"
            placeholder="请选择"
            clearable
            class="ele-block"
          >
            <el-option
              v-for="item in options_factory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 6 } : { span: 6 }">-->
      <!--        <el-form-item label="组织机构:">-->
      <!--          <auth-selection-->
      <!--            data-type="Array"-->
      <!--            v-model="where.deptIds"-->
      <!--            style="width: 100%"-->
      <!--          ></auth-selection>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
        <el-form-item label-width="0">
          <el-input
            size="mini"
            clearable
            v-model="where.keyWord"
            placeholder="批次号/生产工单号/产品名称"
          />
        </el-form-item>
      </el-col>

      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
        <div class="ele-form-actions">
          <el-button
            type="primary"
            icon="el-icon-search"
            class="ele-btn-icon"
            @click="search"
          >
            查询
          </el-button>
          <el-button @click="reset" icon="el-icon-refresh-left" type="primary"
            >重置</el-button
          >
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              展开<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu>
              <div class="searchExpend">
                <el-row>
                  <el-form-item label="关键字:">
                    <el-input
                      size="mini"
                      clearable
                      v-model="where.searchInfo"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-row>

                <el-row>
                  <el-form-item label="生产工单号:">
                    <el-input
                      size="mini"
                      clearable
                      v-model="where.code"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-row>

                <el-row>
                  <el-form-item label="计划编号:">
                    <el-input
                      size="mini"
                      clearable
                      v-model="where.productionPlanCode"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-row>

                <el-row>
                  <el-form-item label="工艺路线:">
                    <el-input
                      size="mini"
                      clearable
                      v-model="where.produceRoutingName"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-row>

                <el-row>
                  <el-form-item label="产品编码:">
                    <el-input
                      size="mini"
                      clearable
                      v-model="where.productCode"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-row>

                <el-row>
                  <el-form-item label="产品名称:">
                    <el-input
                      size="mini"
                      clearable
                      v-model="where.productName"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-row>

                <el-row>
                  <el-form-item label="型号:">
                    <el-input
                      size="mini"
                      clearable
                      v-model="where.model"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-row>
                <!--
                <el-row>
                  <el-form-item label="组织机构:">
                    <auth-selection
                      size="mini"
                      data-type="Array"
                      v-model="where.deptIds"
                      style="width: 100%"
                    ></auth-selection>
                  </el-form-item>
                </el-row> -->
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import { getFactoryarea } from '@/api/saleOrder';
  export default {
    props: {},
    data() {
      // 默认表单数据
      const defaultWhere = {
        keyWord: '',
        code: '',
        productionPlanCode: '',
        produceRoutingName: '',
        productCode: '',
        productName: '',
        brandNo: '',
        model: '',
        factoryId: '',
        status: '',
        createTime: []
      };

      return {
        options_factory: [],
        // 表单数据
        where: { ...defaultWhere },
        statusOpt: [
          { label: '暂停', value: 9 },
          { label: '终止', value: 10 },
          { label: '待下达', value: 8 },
          { label: '待生产', value: 4 },
          { label: '生产中', value: 5 },
          { label: '已完结', value: 6 },
          { label: '已延期', value: 7 }
        ],
        teamList: []
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    watch: {},
    mounted() {
      this.getFactoryarea();
      this.$nextTick(() => {
        this.where.factoryId =
          this.$store.state.user.info.factoryId == 1
            ? ''
            : this.$store.state.user.info.factoryId;
      });
    },
    created() {},
    methods: {
      getFactoryarea() {
        let par = {
          type: 1,
          size: 9999
        };
        getFactoryarea(par).then((res) => {
          if (res.list && res.list.length > 0) {
            this.options_factory = res.list.map((el) => {
              console.log(el.id);
              console.log(el.name);
              return {
                value: el.id,
                label: el.name
              };
            });
            console.log(this.options_factory);
          }
        });
      },
      /* 搜索 */
      search() {
        const where = { ...this.where };
        if (where.createTime?.length) {
          where.createTimeStart = where.createTime[0];
          where.createTimeEnd = where.createTime[1];
        }
        delete where.createTime;
        console.log(where);
        this.$emit('search', where);
      },
      /*  重置 */
      reset() {
        this.where = { ...this.defaultWhere };
        this.search();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .ele-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 4.5px;
  }
  .searchExpend {
    padding: 20px 50px 0 30px;
  }
</style>